Question

这是我当前的代码http://jsfiddle.net/AW5BK/2/

 $(".feedback").hover(function(){
   $(this).animate({marginLeft : "25px"},500);
  },function(){
    $(this).animate({marginLeft : "-25px"},500);
 });

效果很好，但是无论何时快速地将鼠标轻轻地移出和移出物体，它都会反复滑动打开和关闭。有没有办法阻止这种情况发生？谢谢

Answer 1

使用stop()来防止重复的动画冲突：

$(".feedback").hover(function(){
    $(this).stop().animate({marginLeft : "25px"},500);
},function(){
    $(this).stop().animate({marginLeft : "-25px"},500);
});

Here is working jsFiddle.

Answer 2

更好地使用原生方法：

$(".feedback").hover(function(e){
  e.stopPropagation();
  $(this).animate({marginLeft : "25px"},500);
},function(){
  e.stopPropagation(e);
  $(this).animate({marginLeft : "-25px"},500);
});

甚至更好 - CSS过渡：

.feedback {
  transition: all 600ms ease-in-out;
}

.feedback:hover {
  transform: translate3d(-25px, 0, 0);
}

这两个属性都需要前缀：-webkit-，-moz-， - o-和一个没有

jQuery奇怪的悬停事件

2 个答案: