Text rotator with pause in the end

I am trying to create a text rotator with a pause on 3 seconds in the end and then repeat. I have found a relevant script but have some problems with adding the pause in the end.

Codepen: http://codepen.io/AmruthPillai/pen/axvqB/

Script:

(function($) {
    $.fn.extend({
        rotaterator: function(options) {
            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 100,
                child: null
            };
            var options = $.extend(defaults, options);
            return this.each(function() {
                var o = options;
                var obj = $(this);
                var items = $(obj.children(), obj);
                items.each(function() {
                    $(this).hide();
                })
                if (!o.child) {
                    var next = $(obj).children(':first');
                } else {
                    var next = o.child;
                }
                $(next).fadeIn(o.fadeSpeed, function() {
                    $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
                        var next = $(this).next();
                        if (next.length == 0) {
                            next = $(obj).children(':first');
                        }
                        $(obj).rotaterator({
                            child: next,
                            fadeSpeed: o.fadeSpeed,
                            pauseSpeed: o.pauseSpeed
                        });
                    })
                });
            });
        }
    });
})(jQuery);
$(document).ready(function() {
    $('#rotate').rotaterator({
        fadeSpeed: 0,
        pauseSpeed: 100
    });
});

Answers 1

  • the function already uses pauseSpeed to delay the fadeOut so I added the following:

    var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed
    

    I check if the next element .is(':last-child') and add 3000 to the value o.pauseSpeed and used nextDelay instead of o.pauseSpeed to delay the fadeOut

    Working CodePen

    (function($) {
      $.fn.extend({
        rotaterator: function(options) {
    
          var defaults = {
            fadeSpeed: 500,
            pauseSpeed: 100,
            child: null
          };
    
          var options = $.extend(defaults, options);
    
          return this.each(function() {
            var o = options;
            var obj = $(this);
            var items = $(obj.children(), obj);
            items.each(function() {
              $(this).hide();
            })
            if (!o.child) {
              var next = $(obj).children(':first');
            } else {
              var next = o.child;
            }
    
            $(next).fadeIn(o.fadeSpeed, function() {
              var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed
              $(next).delay(nextDelay).fadeOut(o.fadeSpeed, function() {
                var next = $(this).next();
                if (next.length == 0) {
                  next = $(obj).children(':first');
                }
                  $(obj).rotaterator({child: next,fadeSpeed: o.fadeSpeed,pauseSpeed: o.pauseSpeed});
              })
            });
          });
        }
      });
    })(jQuery);
    
    $(document).ready(function() {
      $('#rotate').rotaterator({
        fadeSpeed: 500,
        pauseSpeed: 100
      });
    });
    

    related code is this:

    $(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
    

    I changed it to this:

      var nextDelay = $(next).is(':last-child') ? o.pauseSpeed + 3000 : o.pauseSpeed
      $(next).delay(nextDelay).fadeOut(o.fadeSpeed, function() {
    

Related Articles