jquery 切换动画

Posted 2023-05-08

【中文标题】jquery 切换动画

【英文标题】：jquery toggle animate

【发布时间】：2012-06-16 19:24:04

【问题描述】：

我有这种情况：

$("#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 时，动画不会重复自己

请提出建议。

【参考方案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() 是否有效）

【讨论】：

我相信这行得通，除了比较字符串。这不是在 js 中用 '===' 完成的吗？

其实我尝试了小提琴中的比较部分，（警报而不是动画）。工作得很好。 @LGVentura 尝试在 if 条件中放置警报而不是动画并添加此 $("#window").css('top','-100%');和 $("#window").css('top','0%');适当地。至少会知道 if 条件是否有效

但在 Firefox 中不起作用。仅在 Safari 和 Chrome 中。有没有其他办法？

哦！对不起，伙计，对 jQuery 和浏览器兼容性不太了解。如果我找到一些东西会搜索一下然后回来......直到然后尝试用 $("#window").css('top','-100%'); 替换 animate 函数或者如果仍然不起作用，请删除 iff 条件并检查

【参考方案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;
    

);

【讨论】：

记得使用.stop()停止动画队列--$(window).stop().animate(...

也许布尔值更适合这里？