Onload Jquery Animations

[mwbarry]

I am trying to develop my page so that when the page loads the content fades in sequentially using jquery. The first item works perfectly, but I can't get the others to work properly. Here is what I have:

<script type="text/javascript">$(document).ready(function() {  $("#pagehdr")   .animate({left:"0px"},{queue:false, duration: 700})   .animate({opacity:"1.0"},700);  $("#pagesubhdr")   .delay(500)   .animate({left:"0px"},{queue:false, duration: 700})   .animate({opacity:"1.0"},700);})</script>

#pagehdr animates properly, but #pagesubhdr does not delay and performs animations one after the other rather than both at the same time like #pagehdr does. How do I get all other items other than #pagehdr to delay and then perform the left movement and opacity change at the same time?

[Ingolme]

It's hard to make out your code. If you want things to go in a sequential order, you're going to have to add callbacks to each animate function. The callback function should be in the last parameter of the animate() method

function step1() {  (selector).animate({styles},speed,easing,step2)}function step2() {  (selector).animate({styles},speed,easing,step3)}function step3() {  (selector).animate({styles},speed,easing)}