jquery - 使用jQuery从顶部动画div框

Question

我想在单击按钮后从顶部为 div 框和按钮设置动画，并在单击同一按钮时将框和按钮返回到初始位置。

CSS：

#box{
    position:relative;
    width:500px;height:200px;
    margin-top:200px;
    border:2px solid black;
    }

#box .info-box{
    position:absolute;
    width:500px;height:200px;
    top:-200px;
    background:green;

#box .button{
    position:absolute;
    width:30px;height:30px;
    background:red;
    top:30px;right:10px;
    }

html:

    <div id="box">
    <div class="button"></div>
    <div class="info-box"></div>
    </div>

jQuery 在初始单击时为框设置动画。

    $(".button").click(function(){
    $(this).animate({top:-30});
    $(".info-box").animate({top:0}, 300)
    });

我想在单击按钮后制作动画info-box以填充框并在button框外制作动画（顶部：-30px），并希望在单击同一按钮后将信息框和按钮返回到初始位置。

Answer 1

you could try this:

var isAnimate = false;
$(".button").click(function(){
    if(isAnimate){
       $(this).animate({top:30});    
      $(".info-box").animate({top:-200}, 300)
      isAnimate = false;
    }else{
      $(this).animate({top:-30});    
      $(".info-box").animate({top:0}, 300)
       isAnimate = true;
    }        
});

working fiddle here: http://jsfiddle.net/6kzUV/

I hope it helps.