jq mouseover、out 与 mouseenter、leave的区别 hover_leave在jquery中什么意思-CSDN博客

本文链接：https://blog.csdn.net/a772116804/article/details/82222184

<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>