3

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)

4
  • just a quick thought, not an answer: seems to have something to do with fadespeed. setting this to 5000 either, it looks more like what you want to achieve.
    – Dominik
    Jul 1, 2014 at 9:26
  • @Dominik I have a solution for this using setTimeout but I'm just wanting to know why delay doesn't work rather than have a workaround
    – Pete
    Jul 1, 2014 at 9:32
  • hum, i know that. was just a thought which could perhaps bring someone to the right answer... btw, another one: removing the two stop()-calls inside your fade-method and adding delay(options.fadeDelay) before second "animate" in complete-handler results in the expected behaviour (as I understand it). just did a lil trial and error => jsfiddle.net/StF6f
    – Dominik
    Jul 1, 2014 at 10:15
  • @Dominik ah, i think you're onto something there - if you just remove the stop it will work properly, I wonder if .stop() removes the queueing functionality and therefore that's why delay doesn't work
    – Pete
    Jul 1, 2014 at 10:47

1 Answer 1

0

There is another option to implement delays with setTimeout 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.