|
阅读：4311回复：0
jquery mouseover、out 与 mouseenter、leave的区别 hover
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style> *{margin: 0;padding: 0;} #div1{ width: 100px; height: 100px; background: red; position: relative; } #div2{ width: 50px; height: 50px; background: black; top: -100px; position: absolute; } </style> </head> <body> <div id="div1"> <div id="div2"></div> </div> <script type="text/javascript"> /*$('#div1').mouseover(function(){ $('#div2').stop().animate({top:0},500) });//这种会冒泡影响父级导致重复执行 $('#div1').mouseout(function(){ $('#div2').stop().animate({top:-100},500) });*/ /*$('#div1').mouseenter(function(){ $('#div2').animate({top:0},500) }); $('#div1').mouseleave(function(){ $('#div2').animate({top:-100},500) });*/ //hover 前也加.stop()效果更好 $('#div1').hover(function(){ $('#div2').stop().animate({top:0},500); },function(){ $('#div2').stop().animate({top:-100},500); }) /* jq:mouseover、out 与 mouseenter、leave的区别 mouseover、out：会冒泡冒泡到父级 解决方法前面加stop() 但是也不好。 mouseenter、leave:子集不会影响到父级，单独的。 hover:效果跟mouseenter、leave 一样，因为最后还是调用mouseenter、leave 动画事件前加入.stop()方法. stop()方法有两个参数,你可以全部开启stop(true,true) 意思就是立即让动画进入最后完成阶段,并结束之前所有动画. */ </script> </body> |
|
