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