更新

Question

我对JS和jQuery很新。我在上面的链接中手工编写了所有代码。它可以工作并做我想要它保存的一件事。如果您在“下一个”链接上快速单击，您将看到要显示的下一个容器的闪存，或者如果您足够快地单击，代码将显示两个容器，但我只希望一次只显示一个容器。有没有办法在jQuery中处理这个？我已尝试使用此处讨论的止损：How to prevent jquery hover event from firing when not complete?但这并不能解决问题。

Answer 1

您正在寻找.stop()。它的实现会随着所需的行为而发生变化，但文档应该为您清除：http://api.jquery.com/stop

以下是演示：http://jsfiddle.net/jmPCt/19/

由于.stop()的工作原理，当您将其与.fadeIn()或.fadeOut()一起使用时，您可以将动画切换到不再有效的位置。我发现的最佳解决方案是始终使用.fadeTo()设置绝对值的动画：http://api.jquery.com/fadeTo

这是我添加到您的JSFiddle的代码，这将使用.fadeIn()和.fadeOut()覆盖默认的.fadeTo()和.stop() jQuery函数：

$.fn.fadeOut = function (duration, callback) {
    $(this).stop().fadeTo(duration, 0, function () {
        $(this).css('display', 'none');
        if (typeof callback == 'function') {
            callback();
        }
    });
};
$.fn.fadeIn = function (duration, callback) {
    $(this).css('display', 'block').stop().fadeTo(duration, 1, function () {
        if (typeof callback == 'function') {
            callback();
        }
    });
};

更新

如果您为“幻灯片”元素设置了position属性，那么它们可以在彼此之上设置动画，这将消除代码展示的跳跃性：

HTML -

<div id="controls">
    <div id="countah"></div>
    <a href="#" id=prev>prev</a> | 
    <a href="#" id=next>next</a>
</div>

CSS -

.js .staceyPort {
    display: none;
    position : absolute;
    top      : 0;
    left     : 0;
}

#controls{ 
    position   : fixed;
    bottom     : 0;
    left       : 0;
    z-index    : 1000;
    background : gold;
}

以下是演示：http://jsfiddle.net/jmPCt/21/

在jQuery中完成前一个事件之前阻止另一个事件被触发？

1 个答案:

更新