如何防止jquery悬停事件在未完成时触发？ [英] How to prevent jquery hover event from firing when not complete?

问题描述

这是我遇到困难的地方：

Here is where I am having difficulty:

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

The problem is that multiple hover events can fire while the slideDown and fadeIn animations are occurring. Ideally, only 1 hover event should be firing and if the user is no longer hovering over the div.sidebar_content_con it should stop the animation right there.

推荐答案

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

这篇关于如何防止jquery悬停事件在未完成时触发？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！