jquery - 如何防止 jQuery 悬停事件在未完成时触发？

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 动画发生时，可能会触发多个悬停事件。理想情况下，只应触发一个悬停事件，如果用户不再将鼠标悬停在 div.sidebar_content_con 上，则应立即停止动画。

Answer 1

添加一些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);                                                 
});