timer - Can't adjust Javascript quote rotator initial quote load time of first quote -


i'm having issues simple quote rotator. time between quotes perfect, , can adjust that. need adjust initial load time of first quote separately. it's on same timer rest of quotes, , initial quote needs populate upon page load. i'm not sure add javascript code accomplish that.

<script type="text/javascript"> $(document).ready(function(){ var $quotes = $(".quote").hide(),     timer = 3000,     interval;  var quoterotate = function(){     $quotes.filter(".current").fadein(timer, function(){         var $this = $(this);         var $next = ($(this).next().length > 0) ? $this.next() : $quotes.first();         $this.fadeout(timer, function(){             $this.removeclass('current');             $next.addclass('current');         });     }); };  interval = setinterval(quoterotate, timer * 2.05); }); </script> 

you can set initial delay this:

$(document).ready(function(){      var $quotes = $(".quote").hide(),          timer = 3000,          initialdelay = 0,  //adjust initial delay needed          interval;            var quoterotate = function(){          $quotes.filter(".current").fadein(timer, function(){              var $this = $(this);              var $next = ($(this).next().length > 0) ? $this.next() : $quotes.first();              $this.fadeout(timer, function(){                  $this.removeclass('current');                  $next.addclass('current');              });          });      };            settimeout( function() {          quoterotate();          interval = setinterval(quoterotate, timer * 2.05);      }, initialdelay);  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="quote current">"this quote" -somebody</div>  <div class="quote">"this quote" -somebody</div>  <div class="quote">"this yet quote" -somebody</div>  <div class="quote">"this fourth quote" -somebody</div>  <div class="quote">"this fifth quote" -somebody</div>  <div class="quote">"this sixth quote" -somebody</div>  <div class="quote">"this seventh quote" -somebody</div>  <div class="quote">"this 8th quote" -somebody</div>

i've set 0 here, because seemed might want, can adjust suit. of course if that's want, add call quoterotate() right before set interval:

$(document).ready(function(){ var $quotes = $(".quote").hide(),     timer = 3000,     interval;  var quoterotate = function(){     $quotes.filter(".current").fadein(timer, function(){         var $this = $(this);         var $next = ($(this).next().length > 0) ? $this.next() : $quotes.first();         $this.fadeout(timer, function(){             $this.removeclass('current');             $next.addclass('current');         });     }); };  quoterotate(); //show first quote immediately. interval = setinterval(quoterotate, timer * 2.05); }); 

Comments

Popular posts from this blog

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - UML - How would you draw a try catch in a sequence diagram? -

c++ - No viable overloaded operator for references a map -