如何在hoverOut之後停止動畫？

Question

從這個網站inpired： http://www.designchemical.com/lab/jquery/demo/jquery_demo_slick_jquery_sliding_captions.htm

我曾嘗試使用下面的代碼創建了自己的版本：

$(document).ready(function(){ 

    $(".transparencyOverlay").css("display", "none"); 
    $(".thumbnailTextContainer").css("display", "none"); 

    $(".contestantFirst, .contestant").hover(function(){ 
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow'); 
    },function(){ 
    $(this).children(".transparencyOverlay, .thumbnailTextContainer").slideToggle('slow'); 
    }); 

}); 

的問題是，當我在圖像中徘徊進出連續，動畫將即使當光標在圖像之外時仍繼續運行，任何人都知道如何解決這個問題？

Answer 1

使用的mouseenter觸發動畫，然後鼠標移出與jQuery's stop() function停止它。一個普通的例子：

$('div').mouseenter(function(){ 
    $(this).slideToggle('slow'); 
}); 

$('div').mouseout(function(){ 
    $(this).stop(); 
}); 

jsfiddle

Answer 2

看一看jQuery的.stop（[clearQueue] [，jumpToEnd]）函數

http://api.jquery.com/stop/