Comment mettre en cascade des animations dans jquery

Question

J'ai créé 3 éléments div et j'ai besoin d'un ensemble d'images pour passer les boîtes en les déplaçant une par une en affichant une image dans une case, puis la suivante, puis la suivante toutes les 5 secondes sur une boucle infinie. Je souhaite que les images disparaissent l'une après l'autre (une demi-seconde d'intervalle avant de déclencher le fondu de la case suivante), de sorte qu'elles semblent s'évanouir en cascade, je souhaite que le fondu ne dure qu'une seconde, puis la nouvelle image à l'intérieur de cette case à fondre, prenant environ une seconde pour le faire, et la case suivante déclenchant un fondu avec une demi-seconde d'intervalle.

Je les ai en boucle, mais pas en cascade, quelqu'un peut-il me fournir une solution au problème? Voici mon code actuel:

<div id="box1"></div><div id="box2"></div><div id="box3"></div> 
<script type="text/javascript"> 
//<![CDATA[ 
var test = ['img1.jpg','img2.jpg','img3.jpg']; 
function loopImages() 
{ 
    // swap image positions in array 
    var fimg = test.shift(); 
    test.push(fimg); 
    for (a in test) { 
     var newimage = $('<img />').attr('src',test[a]); 
     var currbox = $('#box' + (Math.floor(a)+1)); 
     //first fade out 
     currbox.find('img').fadeTo('slow',0); 
     // then add new image 
     currbox.empty().append(newimage); 
    } 
    // loop every 5 seconds 
    setTimeout("loopImages()",5000); 
} 
loopImages(); 
//]]> 
</script> 

Answer 1

Quelque chose comme ça devrait faire l'affaire:

var test = ['img1.jpg','img2.jpg','img3.jpg']; 
function loopImages() { 
    var fimg = test.shift(); 
    test.push(fimg); 
    $.each(test, function(i, img) { 
     var newimage = $('<img />').attr('src',img); 
     $('#box' + (i+1)).find('img').delay(i*1000).fadeTo('slow',0, function() { 
      $(this).html(newimage); //shortcut for .empty().append() 
     }); 
    }); 
    setTimeout(loopImages, 5000); 
} 
$(loopImages); 

En utilisant .delay() et en multipliant par l'index que vous êtes dans le tableau, vos animations seront échelonnées. En outre, vous voulez effectuer vos opérations de modification après que le fondu a terminé, je devine, faites-le dans le rappel .fadeTo().

Autres changements: en cours d'exécution loopImages quand setTimeout(), et en utilisant une boucle for traditionnelle itérer sur un tableau (ne pas utiliser un for...in ici, il est pour le document est prêt, en passant une référence (pas une chaîne) énumération).

Answer 2

Essayez de créer vos images en HTML d'abord, utilisez quelque chose comme ceci:

(function($) { 
    $.fn.fadeImages = function(repeatTime, timeBetweenBoxes, boxExistanceTime) { 
     var images = this.children('img').hide(); 
     runFade = function() { 
      images.each(function(i) { 
       var image = this; 
       window.setTimeout(function() { $(image).fadeIn(); }, i * timeBetweenBoxes); 
       window.setTimeout(function() { $(image).fadeOut(); }, i * timeBetweenBoxes + boxExistanceTime); 
      }); 
     }; 
     window.setInterval(runFade, repeatTime); 
     runFade(); 
     return this; 
    }; 
})(jQuery); 

jQuery(function($) { 
    $('#box1,#box2,#box3').fadeImages(5000, 1000, 1100); 
}); 

Tweak les temps dans l'appel de fonction pour le résultat souhaité.

Modifier: ajouté return this; pour le rendre compatible avec le chaînage.

Answer 3

J'ai dû faire un peu un bidouillage à la super solution de Nick afin que ça arrête le bug de la nouvelle variable d'image qui est écrasée et qui est toujours le résultat de la dernière boucle (i == test.length) qui semblait effacer toutes les images en dehors de la dernière. Si quelqu'un a une solution plus propre que mon hack, n'hésitez pas à poster!

<div id="box1"><img src="1.jpg" /></div><div id="box2"><img src="2.jpg" /></div><div id="box3"><img src="3.jpg" /></div> 
<script type="text/javascript"> 
//<![CDATA[ 
var test = ['1.jpg','2.jpg','3.jpg']; 
var imagearr = []; 
function loopImages() { 
    var fimg = test.pop(); 
    test.unshift(fimg); 
    for (var i=0; i<test.length; i++) { 
     var container = '#box' + (i+1); 
     imagearr[i] = $(container); 
     imagearr[i].find('img').data('count',i).delay(i*400).fadeTo('fast',0, function() { 
      var i = $(this).data('count'); 
      var suffix = (i == 0) ? '' : '_small'; 
      var newimage = $('<img />').attr('src',test[i]); 
      imagearr[i].html(newimage); 
      newimage.css('opacity',0).fadeTo('slow',1); 
     }); 
    } 
    setTimeout(loopImages, 1000 * test.length + 3000); 
} 
$(loopImages); 
//]]> 
</script>