jquery - 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%'

如果#window位置是top:-100%'，动画到top:'0%'

并且当用户多次单击时#button，动画不会重复

请建议。

Answer 1

这段代码应该可以工作......

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

});

Answer 2

这应该有效！

$("#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/ 点击动画的红色条（将 -100% 更改为 100% 以便更好地了解 .stop() 是否工作）