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

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