。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(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的评论。