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
Post a Comment