jquery queue problem part 2..

Question

i got a problem again..

 $(".menu-container").animate({top:"25px"},
 function() {
     $(".menu-container").animate({top:"-900px"});
     $(".windows-container").animate({top:"-730px"});
 }); 
 $(".menu-container").hide(function(){
     $(".webPageFrame").attr("src","");                
     addMenuButtons('main-menu',MenuTitleMain);

     addLastMenuButtons('last-menu','Login');

     menuBordersAndCorners('main-menu');
     lastMenuBordersAndCorners('last-menu');
 });
      $(".menu-container").show();
      $(".menu-container").animate({top:"0px"});

i think the last 2 lines are not executing.. i have not seen the .menu-container and did not animate to top:0px;

Answer 1

In this part:

 $(".menu-container").animate({top:"25px"}, function() {
   $(".menu-container").animate({top:"-900px"});
   $(".windows-container").animate({top:"-730px"});
 });

You are queuing the .animate({top:"-900px"}); after the .animate({top:"0px"}); has been queued at the bottom, you need to get it on the queue stack before then, like this:

 $(".menu-container").animate({top:"25px"}, function() {
   $(".windows-container").animate({top:"-730px"});
 }).animate({top:"-900px"});

Currently here's what's happening:

1. .menu-container starts animating to top: 25px
2. .menu-container queues the top: 0px animation`
3. When .menu-container finishes animating to top: 25px it then queues the top: -900px animation.

So the result is it's animating to 25, 0 then -900, because of the order items are inserted into the queue. I'm still not sure that the hide() and show() order are what you're after, but that's the reason you're not seeing the element, it's ending up 900px above the window :)

Update: Based on comments, I think this is closer to what you're after:

$(".menu-container").animate({top:"25px"}, function() {
     $(".windows-container").animate({top:"-730px"});
 }).animate({top:"-900px"}, function(){
     $(".webPageFrame").attr("src","");                
     addMenuButtons('main-menu',MenuTitleMain);
     addLastMenuButtons('last-menu','Login');
     menuBordersAndCorners('main-menu');
     lastMenuBordersAndCorners('last-menu');
 }).animate({top:"0px"});

.hide() and .show() (when not giving a duration > 0) aren't queued, so happen immediately...this does the work once it's 900px out of view.