Trying to fadein divs in a sequence, over time, using JQuery
- by user346602
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.
