無限的jQuery插件不起作用

Question

因此，我在網上找到了滿足我要求的代碼片段，但問題是那不是無限的，所以我希望當它到達最后一個元素時從第一個元素開始重新開始。

原始文字

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

這是我嘗試過但不起作用的方法：

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

代替.each，使用while循環和$（this）.get（x）調用。 在循環結束時，拋出x ++，如果x超出列表的大小，則將其設置回0。

var counter = 0;
var listSize = $(this).size();
while(true)
{
    $elem = $(this).get(counter);
    //stuff goes here
    counter++;
    if(counter >= listSize)
    {
        counter = 0;
    }
}

編輯：不幸的是，一些（全部？）瀏覽器皺成無限循環。 作為一種替代技術，請嘗試包括jquery timers插件。 它本質上是為處理此類重復動畫而設計的，並且不應以完全相同的方式尖叫和死亡。 然后適合您的“一次通過”動畫功能作為要循環播放的動畫。