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.
ORIGINAL SCRIPT
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);
Here is what I tried but doesn't work:
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);
}
});
//LE
(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 >= listSize)
{
counter = 0;
}
}
};
})(jQuery);
instead of .each, use a while loop, and a $(this).get(x) call. At the end of the loop, throw in an x++ and then set x back to 0 if it goes beyond the size of the list.
var counter = 0;
var listSize = $(this).size();
while(true)
{
$elem = $(this).get(counter);
//stuff goes here
counter++;
if(counter >= listSize)
{
counter = 0;
}
}
edit: unfortunately, some (all?) browsers frown on infinite loops. As an alternate technique, try including the jquery timers plugin. It's essentially designed to handle repeated animations of this sort, and shouldn't scream and die in quite the same way. Then fit your "once through" animation function as the animation to be looped.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.