Trying to fadein divs in a sequence, over time, using JQuery

Question

Hi,

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

The following is my (amateurish) 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, rather than fade in in the order I've ascribed to them. Should I be using the queue() function? And, if so, how would I implement it in this case?

Thank you for any assistance.

Answer 1

Take the quotations away from your durations 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

You may need to wrap your images in a <div> and fade those. Like:

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

The quotes around the numbers shouldn't make a difference. JS will implicitly change "2000" to 2000 in a context where a number is expected (except when using +, which will concat strings).

Answer 3

If you've got many images, then you might want to fade them in with a timed function:

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
});