jQuery的切換動畫

Question

我有這種情況：

$("#button").toggle(function(){ 
    $("#window").animate({top:'0%'},1000); 
},function(){ 
    $("#window").animate({top:'-100%'},1000); 
}); 

，但我需要改變它與.click事件的工作，像這樣：

$("#button").click(function(){ 

如果#window位置top:'0%'，動畫到top:'-100%'

if #window position is top:-100%'，animated to top:'0%'

當用戶點擊#button多次沒有得到動畫重演

請建議。

Answer 1

這應該工作！

 
$("#button").click(function(){ 
    if($("#window").css('top') == '0%'){ 
     $("#window").stop().animate({top:'-100%'},1000); 
    }; 
    if($("#window").css('top') == '-100%'){ 
     $("#window").stop().animate({top:'0%'},1000); 
    }; 
}); 

確保你的CSS有這樣的：

​#window{ 
    position: absolute; 
    top:0%; /* -100% as the default case may be */ 
}​ 

在這裏工作的小提琴：http://jsfiddle.net/dNPWg/ 點擊動畫紅色欄上（爲了更好的理解是否.stop的改變-100％到100％ （）工作與否）

Answer 2

此代碼應該工作...

var i = 0; 
$("#button").on('click', function(){ 
    if(i == 0) { 
     $("#window").stop().animate({top:'0%'},1000); 
     i = 1; 
    } else { 
     $("#window").stop().animate({top:'-100%'},1000); 
     i = 0; 
    } 

});