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

Posted 2023-03-05

【中文标题】如何防止 jQuery 悬停事件在未完成时触发？

【英文标题】：How to prevent jQuery hover event from firing when not complete?

【发布时间】：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吗？

【参考方案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);                                                 
);