自己写的一个小插件有性能问题
0
[已解决问题]
解决于 2015-03-20 10:23
事情是这样子的：
由于某些需要以及日后用着方便，我便写了一些小插件，先来说今天这个吧。
主要功能：鼠标滑过指定内容时显示隐藏内容。
实现方法：这里我用了两种方法，一种是直接使用jquery中的 fadeIn 等效果实现；另一种是改变宽高度来显示已隐藏的内容。
还是来看完整源码吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>性能问题</title> <style type="text/css"> *{margin:0;padding:0} ul{list-style:none} body{background-color:#ccc;} .box{ position:relative;width:400px; height:400px;float:left;margin:20px;_display:inline;border:1px solid #f00;} .zxzz_other{position:absolute;top:0;right:0;z-index:9999;width:300px;height:25px;line-height:25px;background:#fff;padding-left:3px; overflow:hidden} .du-sjydw{position:absolute;right:209px;top:34px;width:180px;height:50px;border:1px solid #f00} .du-sjyd-hover{} .du-sjyd-pop{position:absolute;right:0;top:50px;z-index:100;display:none;width:277px;height:200px;border:5px solid #ff9600;background-color:#fff} p.txt{margin-top:100px; line-height:28px; padding:0 10px;} </style> <script type="text/javascript" src="http://bodatrip.com/js/jquery.js"></script> <script type="text/javascript"> ;(function($){ $.fn.Hovershow=function(options){ var defaults={ h_pop:"du-sjyd-pop", //要显示的内容class active:"du-sjyd-hover", //触发时新增class effect:"fadeIn", //显示动画效果 endeffect:"fadeOut", //隐藏时动画效果 showtime:250, //显示时间 hidetime:150, //隐藏时间 autowidth:300, //默认宽度 autoheight:25, //默认高度 showwidth:300, //触发时的高度 showheight:170 //触发时的宽度 }; var options=$.extend(defaults,options);/*传参并覆盖defaults*/ var h_pop=options.h_pop; var active=options.active; var effect=options.effect; var endeffect=options.endeffect; var showtime=options.showtime; var hidetime=options.hidetime; var autowidth=options.autowidth; var autoheight=options.autoheight; var showwidth=options.showwidth; var showheight=options.showheight; return this.each(function(){ var $this=$(this); var $h_num=$this.attr("data-num"); //0表示宽高不发生变化，其它值表示发生变化; if($h_num=="0"){ $this.mouseover(function(){ $this.addClass(active); $this.children('.'+h_pop)[effect](showtime); }).mouseleave(function(){ $this.removeClass(active); $this.children('.'+h_pop).stop().removeAttr('style'); }); }else{ $this.mouseover(function(){ $this.addClass(active).stop().animate({"width":+showwidth+"px","height":+showheight+"px"},showtime); }).mouseout(function(){ $this.removeClass(active).stop().animate({"width":+autowidth+"px","height":+autoheight+"px"},hidetime); }); }; }); }; })(jQuery); </script> <script> $(function(){ /*左侧*/ $('.zxzz_other').Hovershow(); /*右侧*/ $('.du-sjydw').Hovershow(); }); </script> </head> <body> <div class="box"> <div class="zxzz_other " data-num="1" > <span class="c900">其它设置</span>→：<br /> <div class="zxzz_other-main">图片:<select name="sctp" ><option value="0">关闭</option><option value="1">开启</option></select> 图片:<select name="sctp" ><option value="0">关闭</option><option value="1">开启</option></select> </div> </div> <p class="txt"> 问题描述1.<br /> 鼠标滑过上面白色内容后，每次选择select选项时都会执行 【mouseout】，<br /> 正常情况下应该是： 当鼠标移开这块区域后再执行才对。<br /> 问题描述2.<br /> 总感觉性能上有问题，一打开这个页面电脑就会变得很卡。。。。。。 </p> </div> <div class="box"> <div class="du-sjydw" data-num="0"> 鼠标滑过试试 <div class="du-sjyd-pop du-gyw" > </div> </div> </body> </html>
每次打开的时候电脑都会很卡，不知道是不是性能问题，我想应该是的，因为我刚开始试着这样写，还请求路过的大神帮忙看下代码，指点下，谢谢
问题补充：
补充一下：在ie中现象比较明显，下拉菜单被选择时高度会复原
最佳答案
0
后在某群内求助时小伙伴发来一条链接解决了问题：
http://stackoverflow.com/questions/6212309/problem-with-jquery-mouseleave-firing-when-container-has-select-box
其他回答(1)
0
看看 mouseover / mouseenter 和 mouseout / mouseleave 的区别,
