Text Rotator mit Pause am Ende

Question

Ich versuche, einen Text-Rotator mit einer Pause von 3 Sekunden am Ende zu erstellen und dann zu wiederholen. Ich habe ein relevantes Skript gefunden, habe aber einige Probleme beim Hinzufügen der Pause am Ende.

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

Answer 1

Sie können für 3 Sekunden warten oder was auch immer Intervall, das Sie wie setTimeout Anruf mit. Ich habe deinen Code aktualisiert. Prüfen http://codepen.io/anon/pen/XMJQYy

if (next.length == 0){ 
            next = $(obj).children(':first'); 
       setTimeout(function() { 
        $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed}); 
       }, 2000); 
          } else { 
       $(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed}); 
} 

Answer 2

die Funktion bereits pauseSpeed verwendet die fadeOut so habe ich folgendes zu verzögern:

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

ich überprüfen, ob das nächste Element .is(':last-child') und fügen 3000 auf den Wert o.pauseSpeed und verwendet nextDelay statt von o.pauseSpeed zu verzögern

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

---

zugehörigem Code ist dies:

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

ich es so weit geändert:

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

• $(next): der Selektor nächste Element ist.
• .is(':last-child'): prüft, ob $(next) Element is die last-child ihrer Mutter
• .delay(number of milliseconds): .delay() Setzen eines Timers Ausführung nachfolgender Elemente in der Warteschlange (fadeOut in diesem Fall) zu verzögern.
• .fadeOut(): Hide the matched elements by fading them to transparent.
• var nextDelay: definiert ist, unter Verwendung von Conditional (ternary) Operator