苍穹
管理员
管理员
  • UID2
  • 粉丝0
  • 关注0
  • 发帖数202
阅读:5273回复:0

jquery mouseover、out 与 mouseenter、leave的区别 hover

楼主#
更多 发布于:2019-05-15 11:28
<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>
游客


返回顶部