javascript - .delay() 仅适用于第一个动画

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 的内容，我认为您可以传入一个 bool 值来告诉它清除队列，从而允许延迟正常工作 - 例如 .stop(true).delay(5000)，但事实并非如此。

所以我想问题是 .stop() 中的内容阻止了 .delay() 工作以及我如何才能使它们一起工作(供将来引用，因为我可能需要对悬停动画使用带有停止的延迟)

Answer 1

还有另一个选项可以通过setTimeout来实现延迟。 JavaScript 函数。不要只调用 fade()，而是调用 setTimeout 并将 fade() 和 options.fadeDelay 作为参数传递。这是一个例子:

(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);

$('#quote-holder').setupQuoteFade();

#quote-holder {
  position: relative;
}

#quote-holder>p {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
}

#quote-holder>p:first-child {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="quote-holder">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent purus risus, tincidunt nec ante eget, aliquet dapibus nunc. </p>
  <p>Nullam faucibus odio non semper auctor. Mauris porttitor quam vel volutpat malesuada. Nullam sed consequat libero. Fusce ut dolor lorem.</p>
  <p>Vestibulum ut justo in tortor commodo vulputate. Donec imperdiet dolor urna, eget imperdiet arcu tincidunt at. Praesent egestas a leo nec tincidunt. </p>
  <p>Proin eu quam viverra, varius velit eu, ultrices lorem. Aliquam feugiat sapien ac quam luctus pharetra. Pellentesque ut dignissim sem.</p>
  <p>Proin ac tellus nec enim dapibus fermentum. Integer et metus lectus. Sed ut odio in libero sagittis pretium ultricies in nisl. </p>
  <p>In tellus diam, gravida quis turpis ut, tincidunt tempus lectus. Vestibulum dignissim consectetur nisi suscipit aliquet. Nulla facilisi.</p>
</div>

setTimeout(fade, options.fadeDelay);

希望这有帮助!

upd:哎呀，抱歉。没有看到你在描述中关于setTimeout的评论。