在jquery动画后显示一个不可见的div

Question

所以我试图弄清楚如何在jquery上的动画后显示一个不可见的div.这是显示div的代码:

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

css也使div不可见:

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;
}

并点击动画:

  $(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');
 });

});

如何在#menu_h动画完成后将box_green div显示出来？并且假设我还有一个隐藏的#box_yellowdiv,在再次淡出box_green之后我怎么能让它可见(与box_green div具有相同的效果)(让它再次看不见).我实际上有5个div(box_green和box_yellow是其中2个)需要"转动当前显示div并显示div clicked"事件.

Answer 1

你需要实施callback.

来自http://docs.jquery.com/Effects/animate#examples

使用回调函数的示例.第一个参数是一个CSS属性数组,第二个参数指定动画应该花费1000毫秒来完成,第三个参数指定缓动类型,第四个参数是匿名回调函数.

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

替换function(){alert("all done");}为您自己的功能,使某些东西出现,消失,任何东西......:P