使用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）外動畫cliking按鈕後，想點擊相同後返回初始位置的信息，框和按鈕按鈕。

Answer 1

你可以試試這個：

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

工作小提琴這裏：http://jsfiddle.net/6kzUV/

我希望它能幫助。