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_yellow div，在再次淡出box_green之后我怎么能让它可见（与box_green div具有相同的效果）（让它再次看不见）。我实际上有5个div（box_green和box_yellow是其中2个）需要“转动当前显示div并显示div click”事件。

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

Answer 2

您还可以使用show和hide函数，而不是使用元素的CSS，如果显示/隐藏相同的元素，甚至可以使用toggle。

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

2 个答案: