Essayer de diviser des divs dans une séquence, au fil du temps, en utilisant JQuery

Question

J'essaie de comprendre comment faire pour que 4 images s'affichent séquentiellement lorsque la page se charge.

Ce qui suit est mon (amateurisme) Code:

Voici le code HTML:

<div id="outercorners"> 

<img id="corner1" src="images/corner1.gif" width="6" height="6" alt=""/> 
<img id="corner2" src="images/corner2.gif" width="6" height="6" alt=""/> 
<img id="corner3" src="images/corner3.gif" width="6" height="6" alt=""/> 
<img id="corner4" src="images/corner4.gif" width="6" height="6" alt=""/> 

</div><!-- end #outercorners--> 

Voici le JQuery:

$(document).ready(function() { 

$("#corner1").fadeIn("2000", function(){ 

$("#corner3").fadeIn("4000", function(){ 

    $("#corner2").fadeIn("6000", function(){ 

    $("#corner4").fadeIn("8000", function(){ 


    }); 

    }); 

}); 

}); 

Voici le css:

#outercorners { 
position: fixed; 
top:186px; 
left:186px; 
width:558px; 
height:372px; 
} 

#corner1 { 
position: fixed; 
top:186px; 
left:186px; 
display: none; 
} 

#corner2 { 
position: fixed; 
top:186px; 
left:744px; 
display: none; 
} 

#corner3 { 
position: fixed; 
top:558px; 
left:744px; 
display: none; 
} 

#corner4 { 
position: fixed; 
top:558px; 
left:186px; 
display: none; 
} 

Ils semblent juste clin d'oeil à moi, plutôt que de se fondre dans l'ordre que je leur ai attribué. Dois-je utiliser la fonction queue()? Et, si oui, comment l'implémenterais-je dans ce cas?

Nous vous remercions de votre aide.

Answer 1

Prenez les citations loin de vos durées ou utilisez l'une des présélections 'lent' ou 'rapide' etc

$("#corner1").fadeIn(2000, function(){... 

OU

$("#corner1").fadeIn("slow", function(){... 

PAS

$("#corner1").fadeIn("2000", function(){... 

Answer 2

Vous pouvez besoin d'envelopper vos images dans un <div> et de les fondre. Comme:

<div id="corner1"><img src="images/corner1.gif" width="6" height="6" alt=""/></div> 

Les guillemets autour des nombres ne devraient pas faire de différence. JS changera implicitement "2000" en 2000 dans un contexte où un nombre est attendu (sauf en utilisant +, qui concaténera des chaînes).

Answer 3

Si vous avez beaucoup d'images, vous pouvez les effacer avec une fonction chronométré:

var x=0; // The corner counter 

function fading() { 
    $("#corner"+(++x)).fadeIn(2000); // Fade in the current corner 

    if (x==4) { // Last image to be faded in? 
    clearInterval(); // Stop interval 
    } 
} 

$(document).ready(function(){ 
    setInterval("fading()",1000); // Call function every second 
}); 

Answer 4

Je sais que c'est quelques mois question, mais je pensais juste pour poster une solution ce qui pourrait aider quelqu'un. Je ferais quelque chose comme ceci:

var d= 0; 
$('#outercorners > img').each(function() { 
    $(this).delay(d).fadeIn(1000); 
    d += 1000; 
}); 

Vous pouvez changer le 1000ms à n'importe quel chiffre pour adapter à votre besoin. Notez qu'ils n'ont pas besoin d'être égaux.

Démo:

http://jsfiddle.net/e5H5Y/

http://jsfiddle.net/e5H5Y/2/

Bonne chance