Showing an invisible div after jquery animate

Question

So I'm trying to figure out how to show an invisible div after an animation on jquery. Here's the code to show the div:

$('#box_green')
    .css({
        visibility: "visible",
        opacity: 0
    })
    .fadeIn('slow')
;

the css which also makes the div invisible:

div#box_green{
    background-image:url(../images/bg_stripe_green.png);
    background-repeat:repeat;
    width: 478px;
    height:300px;
    position:absolute;
    top:249px;
    z-index:20;
    visibility:hidden;
}

and the animation on click:

  $(document).ready(function(){

$("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").one('click', function(){
    $("#menu_h").animate({"left": "+=419px"}, "slow");
    $("#menu_p").animate({"left": "+=313px"}, "slow");
    $("#menu_q").animate({"left": "+=210px"}, "slow");
    $("#menu_b").animate({"left": "+=104px"}, "slow");
    $("#menu_c").animate({"left": "+=0px"}, "slow");
    $("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").unbind('click');
 });

});

how can I make it that the box_green div shows after the #menu_h animation is done? and lets say that I have also a hidden #box_yellow div, how can I make it visible (with the same effect as the box_green div) after fading out the box_green again (letting it be invisible again). I actually have 5 divs (box_green and box_yellow are 2 of them) that need to have that "turn currently displayed div off and show div clicked" event.

Answer 1

You will need to implement callback.

From http://docs.jquery.com/Effects/animate#examples

An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.

$("p").animate({
       height:200, width:400, opacity: .5
    }, 1000, "linear", function(){alert("all done");} );

Replace function(){alert("all done");} with your own function to made something appear, disappear, anything... :P

Answer 2

You can also use the show and hide functions, rather than play with the CSS of the element, or even toggle if you show/hide the same element.

Answer 3

Tried this code but it didn't work...

  $(document).ready(function(){

$("#menu_h, #menu_p, #menu_q, #menu_, #menu_c").one('click', function(){
    $("#menu_h").animate({"left": "+=419px"}, "slow", function(){$('#box_green') .css({ visibility: "visible", opacity: 0 }) .fadeIn('slow');} );
    $("#menu_p").animate({"left": "+=313px"}, "slow");
    $("#menu_q").animate({"left": "+=210px"}, "slow");
    $("#menu_b").animate({"left": "+=104px"}, "slow");
    $("#menu_c").animate({"left": "+=0px"}, "slow");
    $("#menu_h, #menu_p, #menu_q, #menu_b, #menu_c").unbind('click');
 });

});