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

Question

http://jsfiddle.net/jmPCt/18/

我对 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() jQuery 函数。 fadeTo() 和 .stop():

$.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/