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

这应该有效！

$("#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() 是否有效）

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

});