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

Question

I have written a simple jQuery fade plugin but I am having trouble getting the delay to work correctly. It will work on the first item but then it is ignored after that

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

As you can see from the example, it waits 5 seconds before starting the animation to fadeout but then each call after that happens immediately rather than waiting the 5 seconds.

I have tried adding things like .clearQueue() in various places or queue: true to the animation options - in the case of the later it stops the fading of the second item happening.

I know I can use a setTimeout on the fade function but I'm trying to understand why the .delay() doesn't work

Edit

Further to Dominik's comments, by removing the .stop() it allows the plugin to work correctly so having read about stop, I thought you are able to pass in a boolean to tell it to clear the queue and therefore allow the delay to work properly - eg .stop(true).delay(5000) , but it doesn't.

So I guess the question is what in .stop() is stopping the .delay() from working and how would I be able to make them work together (for future reference as I may need to use a delay with a stop for hover animations)

Answer 1

There is another option to implement delays withsetTimeout javascript function. Instead of just calling fade(), call setTimeout and pass fade() and options.fadeDelay as arguments. Here is an example:

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

Hope this helps!

upd: oops, sorry. didn't see your remarks about setTimeout in description.