jQuery Image Fade Sequence?

Question

J'ai une question concernant jQuery et l'évanouissement de l'image. J'ai un tas d'images et je voudrais fondre chacune séquentiellement à l'opacité complète lorsque vous chargez la page. Mon code html est ci-dessous:

<div class='mod'> 
    <img src='image-src' alt='' /> 
    <div class='mod-text'> 
    <h2>Title</h2> 
    <p>Caption</p></div> 
</div> 

<div class='mod'> 
    <img src='image-src' alt='' /> 
    <div class='mod-text'> 
    <h2>Title 2</h2> 
    <p>Caption 2</p></div> 
</div> 

Chaque image a son propre titre et légende qui s'affichent l'un sous l'autre. Je voudrais que la première image apparaisse en premier, puis que chaque image suivante apparaisse après. Quelqu'un a une idée? J'ai une compréhension très basique de jQuery. Merci

Answer 1

Ce n'est probablement pas quelque chose que vous devez implémenter vous même, consultez le jQuery Cycle Plugin.

Answer 2

Vous aurez besoin de faire la queue les animations puis démarrez chaque lorsque les extrémités précédentes:

<img src="..." /> 
<img src="..." /> 
<img src="..." /> 
<img src="..." /> 

var animations = new Array(); 
// queue all 
$("img").each(function() { 
    animations.push($(this)); 
}); 

// start animating 
doAnimation(animations.shift()); 

function doAnimation(image) { 
    image.fadeIn("slow", function() { 
     // wait until animation is done and recurse if there are more animations 
     if(animations.length > 0) doAnimation(animations.shift()); 
    }); 
} 

Answer 3

Vous pouvez aussi les enchaîner dans en retardant l'effet pour chaque image suivante comme si (note: je m avec window.load pour assurer que toutes les images sont chargées avant de commencer les animations):

$(window).load(function() { 

     var delay = 0; 

     $('img').each(function() { 
      $(this).delay(delay).fadeIn(); 
      delay += 150; 
     }); 

    }); 

C'est idéal pour le chevauchement des animations plutôt que d'attendre jusqu'à chacun complète. Il peut également être randomisé comme suit:

$(window).load(function() { 

     var delay = 0; 

     $('img').sort(function() { return (Math.round(Math.random()) - 0.5); }).each(function() { 
      $(this).delay(delay).fadeIn(600); 
      delay += 150; 
     }); 

    });