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.

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.

• javascript
• jquery
• jquery-animate
• hidden

Share Improve this question Follow asked Nov 14, 2009 at 9:13 BrunoBruno 14511 gold badge33 silver badges99 bronze badges 3

• You don't need to unbind if you're using the one function. Also, your question is terribly confusing. Why are you hiding #box_green again? – Richard Nguyen Commented Nov 14, 2009 at 10:06
• think of it as an image with information on subject X when I click on X on the menu this image should appear (with the jquery effect) it stays hidden because the menu takes the whole content area until someone clicks on the menu option X, then the whole menu slides to the right leaving enough space for the image (box_green content) to show up. – Bruno Commented Nov 14, 2009 at 10:36
• the idea is to keep not one but five divs hidden, each one is a menu content, and they should only show up when the menu option is clicked on – Bruno Commented Nov 14, 2009 at 10:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You will need to implement callback.

From http://docs.jquery./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 plete, 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

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.