JQuery Slideup/Slidedown a div 仅在上一个 div 动画之后或延迟之后答案

【问题标题】：JQuery Slideup/Slidedown a div only after previous div animation or after delayJQuery Slideup/Slidedown a div 仅在上一个 div 动画之后或延迟之后
【发布时间】：2011-08-16 07:30:57
【问题描述】：

目前我有一个 JQuery 脚本http://jsfiddle.net/gaby/zzj7E/5/，它处理当我将鼠标悬停在特定 div 上时，隐藏的 div 向下滑动的要求。这发生在我悬停的每个 div 上。

但是，您会注意到，如果将鼠标快速悬停在一组 div 上，则会留下几个 div 一次向下滑动。其实我不想要这个。

我想要的是，除非前一个 div 没有完全向上滑动，否则即使悬停在另一个 div 上也不会向下滑动。或者如果可能，仅当用户将鼠标悬停超过 1.5 秒时才显示 div 向下滑动效果。

这可以在 jQuery 中实现吗？有人可以帮忙吗？

编辑： 必须使用 .live() 将效果添加到动态添加的元素中。不能将悬停与 live() 一起使用，因为它很麻烦。以下是我正在使用的代码

 $(".altbgcolor").live('mouseenter', function() {
              //hover code
              $(this)
                    .addClass('altbgcolor-active')
                    .find(".sharedp")
                    .slideDown('slow');
            }).live('mouseleave', function() {
              //stopped hovering code
              $(this)
                    .removeClass('altbgcolor-active')
                    .find(".sharedp")
                    .slideUp('slow');
            });

如何在这个 mouseenter 和 mouseleave 事件中整合效果？

【问题讨论】：

确保一切皆有可能。但它不是很清楚你想做什么。

标签： jquery css

【解决方案1】：

这样的事情会起作用：

http://jsfiddle.net/zzj7E/27/

$(".altbgcolor").hover(function() {
    var el= $(this);
    el.addClass('altbgcolor-active');
    el.data('hover', setTimeout(function()
        {
            if (el.hasClass('altbgcolor-active'))
            {
                el.find(".sharedp").slideDown('normal');
            }
        }, 1500)
    );

},function () {
    var el= $(this);
    clearTimeout(el.data('hover'));
    el.removeClass('altbgcolor-active')
        .find(".sharedp")
        .slideUp('normal');
});

编辑：如果使用 mouseover 和 mouseout 事件而不是悬停：

http://jsfiddle.net/zzj7E/30/

$(".altbgcolor").live({
    mouseenter: function() {
        var el= $(this);
        el.addClass('altbgcolor-active');
        el.data('hover', setTimeout(function()
            {
                if (el.hasClass('altbgcolor-active'))
                {
                    el.find(".sharedp").slideDown('normal');
                }
            }, 1500)
        );      
    },
    mouseleave: function () {
        var el= $(this);
        clearTimeout(el.data('hover'));
        el.removeClass('altbgcolor-active')
            .find(".sharedp")
            .slideUp('normal');
    }
});

【讨论】：

你应该在某处清除超时，现在你有同样的问题但延迟了 1.5 秒
嘿伙计，感谢您的解决方案。它工作得很好。但是现在我已经将“悬停”更改为“mouseenter”和“mouseleave”，因为我需要使用 .live() 函数。知道不使用“悬停”时如何实现上述效果吗？ :(
@Sunny D'Souza - 更新了我的答案，展示了如何通过使用 live 而不是 hover 来达到同样的效果。
@RoccoC5 抱歉，RoccoC5 回复晚了，但我使用了上述解决方案。由于某种未知的原因，它似乎没有工作。请你检查一下。我在我的网站上使用过它mashup2.sunnydsouza.com
请RoccoC5...你能帮帮我吗？

【解决方案2】：

我不是 100% 确定你想要什么，但我认为你正在寻找 .stop()

有你更新的例子： http://jsfiddle.net/zzj7E/18/

【讨论】：