javascript - 无限的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()
    {
        //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);

最佳答案

代替.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插件。它本质上是为处理此类重复动画而设计的，并且不应以完全相同的方式尖叫和死亡。然后适合您的“一次通过”动画功能作为要循环播放的动画。

关于javascript - 无限的jQuery插件不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9502702/