Как остановить анимацию после 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, чтобы вызвать анимацию, а затем MouseOut, чтобы остановить его с jQuery's stop() function. Общий пример:.

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

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

jsfiddle

Answer 2

Посмотрите на .stop JQuery функция ([clearQueue] [, jumpToEnd])

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