无限的jQuery插件不起作用

Question

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

Answer 1

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.