在mouseenter/mouseleave上淡入/淡出，停止队列

Question

这是我用来让一些图像在悬停时更改其src的代码片段。

$(".social").on({ 
    mouseenter: function() { 
     $(this).data("original-src", $(this).attr("src")) 
      .fadeOut(250, function() { 
      $(this).attr("src", $(this).attr("data-src")); 
     }).fadeIn(250); 
    }, 
    mouseleave: function() { 
     $(this).fadeOut(250, function() { 
      $(this).attr("src", $(this).data("original-src")); 
     }).fadeIn(250); 
    } 
}); 

有一个问题，当你通过鼠标滑过多次，动画重复和队列转为疯了..看到这段视频：http://youtu.be/dTYhbcQM3tI 我怎样才能避免这种情况？我尝试了.stop()，但似乎没有正常工作。

这里是基地的jsfiddle： http://jsfiddle.net/HpmN7/925/

Answer 1

使用stop(true, true)（？清除队列真，跳转到年底真）

$(".social").on({ 
    mouseenter: function() { 
     $(this).data("original-src", $(this).attr("src")) 
      .stop(true, true).fadeOut(250, function() { 
      $(this).attr("src", $(this).attr("data-src")); 
     }).fadeIn(250); 
    }, 
    mouseleave: function() { 
     $(this).stop(true, true).fadeOut(250, function() { 
      $(this).attr("src", $(this).data("original-src")); 
     }).fadeIn(250); 
    } 
}); 

Answer 2

可以，只要你的MouseEnter，然后再创建动画清除动画队列。就像这样：

$(".social").on({ 
    mouseenter: function() { 
     $(this).finish(); 
     $(this).data("original-src", $(this).attr("src")) 
      .fadeOut(250, function() { 
      $(this).attr("src", $(this).attr("data-src")); 
     }).fadeIn(250); 
    }, 
    mouseleave: function() { 
     $(this).fadeOut(250, function() { 
      $(this).attr("src", $(this).data("original-src")); 
     }).fadeIn(250); 
    } 
});