Showing an invisible div after jquery animate
So I'm trying to figure out how to show an invisible div after an animation on jquery. Her开发者_Go百科e'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.
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
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.
精彩评论