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

【问题标题】：How to prevent jQuery hover event from firing when not complete?如何防止 jQuery 悬停事件在未完成时触发？
【发布时间】：2011-09-24 15:41:32
【问题描述】：

这是我遇到困难的地方：

$('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 上，它应该在此处停止动画。

【问题讨论】：

你能分享一些简单的HTML吗？

标签： jquery jquery-selectors jquery-events

【解决方案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);                                                 
});

【讨论】：

【解决方案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()

【讨论】：

【解决方案3】：

尝试将 .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); }); }，功能（）{ $(this).children('.sidebar_details_container').stop().slideUp(500) $('.sidebar_details, .sidebar_click').stop().fadeOut(500); });

【讨论】：

【解决方案4】：

您需要使用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);                                                 
});

【讨论】：