Question

我编写了一个简单的jQuery淡入淡出插件但是我无法让延迟正常工作。它将适用于第一个项目，但之后会被忽略

的jQuery

(function ($) {
    $.fn.setupQuoteFade = function (options) {
        options = $.extend({
            fadeSpeed: 600,
            fadeDelay: 5000
        }, options);

        return $(this).each(function () {
            var quoteHolder = $(this),
                quotes = quoteHolder.children('p'),
                fadeIndex = 0;

            fade();

            function fade() {
                quotes.eq(fadeIndex)
                    .stop()
                    .delay(options.fadeDelay)
                    .animate({ opacity: 0 }, options.fadeSpeed, function () {
                        fadeIndex++;
                        if (fadeIndex == quotes.length) {
                            fadeIndex = 0;
                        }

                        quotes.eq(fadeIndex).stop().animate({ opacity: 1 }, options.fadeSpeed, function () {
                            fade();
                        });
                    });
            }
        });
    };
})(jQuery);

Example

从示例中可以看出，它在开始动画之前等待5秒才淡出，但之后的每次调用都会立即发生而不是等待5秒。

我尝试在各个地方添加.clearQueue()或在动画选项中添加queue: true等内容 - 在后者的情况下，它会停止第二项发生的淡出。

我知道我可以在淡入淡出功能上使用setTimeout，但我试图了解为什么.delay()无效

修改

继Dominik的评论之后，通过删除.stop()，它允许plugin to work正确地读取有关停止的内容，我认为您可以传入一个布尔值来告诉它清除队列，因此允许延迟正常工作 - 例如.stop(true).delay(5000)，但它没有。

所以我想问题是.stop()阻止.delay()停止工作的问题以及如何让它们一起工作（以备将来参考，因为我可能需要使用延迟悬停动画停止）

Answer 1

使用setTimeout javascript函数实现延迟还有另一种选择。不要只调用fade（），而是调用setTimeout并将 fade（）和 options.fadeDelay 作为参数传递。这是一个example fiddle：

setTimeout(fade, options.fadeDelay);

希望这有帮助！

更新：哎呀，抱歉。在说明中没有看到关于setTimeout的评论。

.delay（）仅适用于第一个动画

1 个答案: