Как предотвратить запуск события jquery hover, если оно не завершено?

Question

Вот где я испытываю трудности:

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').slideUp(500)
    $('.sidebar_details, .sidebar_click').fadeOut(500);                                                 
});

Проблема заключается в том, что при возникновении анимации slideDown и fadeIn могут возникать несколько событий при наведении курсора.В идеале должно срабатывать только 1 событие при наведении курсора, и если пользователь больше не зависает над div.sidebar_content_con, он должен немедленно остановить анимацию.

Answer 1

Добавить в некоторые stop() s

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').stop(true, true).fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').stop(true, true).slideUp(500)
    $('.sidebar_details, .sidebar_click').stop(true, true).fadeOut(500);                                                 
});

Answer 2

Вы можете использовать stopImmediatePropagation () для события, чтобы избежать его всплытия и запуска других событий

$('div.sidebar_content_con').hover(function (event) {
    event.stopImmediatePropagation();
    $('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop(true, true).slideDown(500, function() 

Answer 3

Необходимо остановить распространение события методом stop().

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop('true, true).slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').stop('true, true).fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').stop('true, true).slideUp(500)
    $('.sidebar_details, .sidebar_click').stop('true, true).fadeOut(500);                                                 
});

Answer 4

Попробуйте добавить .stop () к цепочке функций (http://api.jquery.com/stop/):

$('div.sidebar_content_con').hover(function () {
    $(this).children('.sidebar_details_container').stop().slideDown(500, function() {
        $(this).children('.sidebar_details, .sidebar_click').stop().fadeIn(500);   
    });

},function(){
    $(this).children('.sidebar_details_container').stop().slideUp(500)
    $('.sidebar_details, .sidebar_click').stop().fadeOut(500);                                                 
});