Le plugin jquery infini ne fonctionne pas

Question

Donc j'ai trouvé un extrait de code sur le web qui fait ce que je veux, mais le problème est qu'il n'est pas infini, donc je veux quand il touche le dernier élément à recommencer depuis le premier un.

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

Voici ce que j'ai essayé, mais ne fonctionne pas:

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

au lieu de .each, utilisez une boucle while et un appel $ (this) .get (x). À la fin de la boucle, lancez un x ++ et redéfinissez x à 0 s'il dépasse la taille de la liste.

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

éditer: malheureusement, certains (tous?) Navigateurs froncent les sourcils sur les boucles infinies. Comme technique alternative, essayez d'inclure le plugin jquery timers. Il est essentiellement conçu pour gérer des animations répétées de ce type, et ne devrait pas crier et mourir de la même manière. Ensuite, adaptez votre fonction d'animation "une fois par" comme l'animation à boucler.