Trying fadein divs in sequence over time using jQuery

Question

I'm trying to figure out how to make 4 images fade out when the page loads.

Below is my (amateur) code:

Here is the 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-->

Here is the jQuery:

$(document).ready(function() {

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

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

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

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


    });

   });

 });

 });

Here is the 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;
}

They seem to just wink at me, and not disappear in the order that I attributed to them. Should I use the queue () function? And if so, how would I implement it in this case?

Thanks for any help.

Answer 1

Clear quotes from your duration or use one of the presets "slow" or "fast", etc.

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

OR

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

NOT

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

Answer 2

, , , -. - :

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

1000 . , .

:

http://jsfiddle.net/e5H5Y/

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

.

Answer 3

, :

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

<div> . :

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

. JS "2000" 2000 , ( , +, ).