Plusieurs images fondu entrant/sortant

Question

J'ai environ 20 images différentes que je veux fondre dans et hors 4 boîtes. J'en ai besoin pour sélectionner une image de manière aléatoire dans la liste des images et l'afficher.

Les exemples de boîtes photo1, photo2, photo3, photo4 sont leurs noms. Ils doivent être nommés individuellement car ils sont positionnés en absolu.

<div id="photo1"> 
    <img src="images/photo.jpg" width="300" height="300" /> 
    <img src="images/photo2.jpg" width="300" height="300" /> 
    <img src="images/photo3.jpg" width="300" height="300" /> 
    <img src="images/photo4.jpg" width="300" height="300" /> 
    <img src="images/photo5.jpg" width="300" height="300" /> 
    </div> 

jquery jusqu'à présent

<script type="text/javascript"> 

//generate random number 
var randomnumber=Math.floor(Math.random()*$("#photo1").children().length); 
$(function() { 
    //hide all the images (if not already done) 
    $("#photo1 > img").hide(); 

    //set timeout for image to appear (set at 500ms) 
    setTimeout(function(){ 
     //fade in the random index of the image collection 
     $("#photo1 > img:eq(" + randomnumber + ")").fadeIn(); 
    }, 500);  
}); 
</script> 

Answer 1

J'ai refactorisé votre code:

$(function() { 
    // match all divs with ID starting with 'photo' 
    $("div[id^=photo] > img").hide(); 
    setTimeout(function(){ 
     $("div[id^=photo]").each(function() { 
      var rand = Math.floor(Math.random() * $(this).children().length); 
      $(this).find('img:eq(' + rand + ')').fadeIn(); 
     }); 
    }, 500);  
}); 

Voir http://api.jquery.com/attribute-starts-with-selector/

Answer 2

jQuery Cycle

Très pratique.