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（）是否正常工作）

jquery切换动画

2 个答案: