javascript - jQuery奇数悬停事件

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);
});

这是工作的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- 和一个没有前缀