Databases
StackOverflow2013
Postsdbo
POInfinite jquery plugin doesn't work
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POInfinite jquery plugin doesn't work
    text
    copied!<p>So I found a snippet of code on the web which does what I want, but the problem is that is not infinite, so I want when it hits the last element to start over from the first one.</p> <p><em><strong>ORIGINAL SCRIPT</em></strong></p> <pre><code>jQuery.fn.fadeInSequence = function(fadeInTime, timeBetween) { //Default Values timeBetween = typeof(timeBetween) == 'undefined' ? 0 : timeBetween; fadeInTime = typeof(fadeInTime) == 'undefined' ? 500 : fadeInTime; //The amount of remaining time until the animation is complete. //Initially set to the value of the entire animation duration. var remainingTime = jQuery(this).size() * (fadeInTime+timeBetween); var i=0; //Counter return jQuery(this).each(function() { //Wait until previous element has finished fading and timeBetween has elapsed jQuery(this).delay(i++*(fadeInTime+timeBetween)); //Decrement remainingTime remainingTime -= (fadeInTime+timeBetween); if(jQuery(this).css('display') == 'none') { jQuery(this).fadeIn(fadeInTime); } else //If hidden by other means such as opacity: 0 { jQuery(this).animate({'opacity' : 1}, fadeInTime); } //Delay until the animation is over to fill up the queue. jQuery(this).delay(remainingTime+timeBetween); }); }; })(jQuery); </code></pre> <p><em><strong>Here is what I tried but doesn't work:</em></strong></p> <pre><code>jQuery.fn.fadeInSequence = function(fadeInTime, timeBetween) { //Default Values timeBetween = typeof(timeBetween) == 'undefined' ? 0 : timeBetween; fadeInTime = typeof(fadeInTime) == 'undefined' ? 500 : fadeInTime; //The amount of remaining time until the animation is complete. //Initially set to the value of the entire animation duration. var remainingTime = jQuery(this).size() * (fadeInTime+timeBetween); var i=0; //Counter return jQuery(this).each(function() { if(jQuery(this).is(':last-child')){ //Wait until previous element has finished fading and timeBetween has elapsed jQuery(this).parent().find('.slide').eq(0).delay(i++*(fadeInTime+timeBetween)); //Decrement remainingTime remainingTime -= (fadeInTime+timeBetween); if(jQuery(this).parent().find('.slide').eq(0).css('display') == 'none') { jQuery(this).parent().find('.slide').eq(0).fadeIn(fadeInTime); } else //If hidden by other means such as opacity: 0 { jQuery(this).parent().find('.slide').eq(0).animate({'opacity' : 1}, fadeInTime); } //Delay until the animation is over to fill up the queue. jQuery(this).parent().find('.slide').eq(0).delay(remainingTime+timeBetween); }else{ //Wait until previous element has finished fading and timeBetween has elapsed jQuery(this).delay(i++*(fadeInTime+timeBetween)); //Decrement remainingTime remainingTime -= (fadeInTime+timeBetween); if(jQuery(this).css('display') == 'none') { jQuery(this).fadeIn(fadeInTime); } else //If hidden by other means such as opacity: 0 { jQuery(this).animate({'opacity' : 1}, fadeInTime); } //Delay until the animation is over to fill up the queue. jQuery(this).delay(remainingTime+timeBetween); } }); </code></pre> <p>//LE</p> <pre><code>(function(jQuery) { jQuery.fn.fadeInSequence = function(fadeInTime, timeBetween) { //Default Values timeBetween = typeof(timeBetween) == 'undefined' ? 0 : timeBetween; fadeInTime = typeof(fadeInTime) == 'undefined' ? 500 : fadeInTime; //The amount of remaining time until the animation is complete. //Initially set to the value of the entire animation duration. var remainingTime = jQuery(this).size() * (fadeInTime+timeBetween); var i=0; //Counter var counter = 0; var listSize = $(this).size(); while(true) { $elem = $(this).get(counter); //Wait until previous element has finished fading and timeBetween has elapsed jQuery(this).delay(i++*(fadeInTime+timeBetween)); //Decrement remainingTime remainingTime -= (fadeInTime+timeBetween); if(jQuery(this).css('display') == 'none') { jQuery(this).fadeIn(fadeInTime); } else //If hidden by other means such as opacity: 0 { jQuery(this).animate({'opacity' : 1}, fadeInTime); } //Delay until the animation is over to fill up the queue. jQuery(this).delay(remainingTime+timeBetween); counter++; if(counter &gt;= listSize) { counter = 0; } } }; })(jQuery); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload