Jquery 如何在单击同一元素时反转动画

我有这个jQuery代码，它工作得很好。当我第一次点击包装时，它会从上到下自动折叠。我想要的是，当我点击包装器时，相同的动画再次重复，但向上，即从下到上

我正在使用

---

我该怎么做？改进动画的建议也很受欢迎。

我认为您需要使用

#Wrapper

存储一个标志，以便知道调用动画的方法，可能只是在一些

数据（）中。如果设置了标志，则需要颠倒顺序。通过将元素存储在一个数组中并循环通过该数组来计算超时和动画顺序，您可以稍微简化此过程，避免复制粘贴所有内容：

更新

正如Chirag所暗示的，您还需要使用
perspectiveDownRetourn
，这样折叠动画才能工作。在应用
magictime
之前，您需要在开始时将其应用于元素，最好是在HTML中，这样它们就不会在开始时折叠。然后在代码中，同时切换
perspectiveDown
和
perspectiveDownRetourn
：


$（文档）.ready（函数（）{
//在magictime之前添加透视下行，以避免在开始时播放透视下行
var articles=$（“#Article_1，#fold12，#fold123”）.addClass（'perspectiveDownRetourn'）；
setTimeout（函数（）{articles.addClass（'magictime'）；}，100）；
$（“#包装器”）。数据（'showing'，false）。单击（函数（）{
var$this=$（this）；
var flag=$this.data（'显示'）
变量元素=[“第1条”、“第12条”、“第123条”]；
//如果显示，请颠倒显示顺序
国际单项体育联合会（旗）{
元素反向（）；
}
//倒旗
$this.data（'显示'，！标志）；
//循环元素并切换向下和向上动画
对于（变量i=0；i

点击我
第一条
折叠12
Fold 123
请提供JSFIDLE。它在第一次单击包装器元素时工作。但在动画完成后。当我再次单击包装器元素时，第二次动画不工作。您可以使用“magictime透视图”进行第二次单击吗？thx Rhumboll作为您的答复。我真的很抱歉占用你的时间。我没有JSFIDLE帐户，否则我将向您提供我的全部代码。没问题-顺便说一句，您不需要帐户来创建JSFIDLE-只需添加您的代码并按Save，然后复制页面URL感谢您Rhumbori为我提供了如此宝贵的时间。没有您的帮助，此代码工作非常好。再次感谢您。
$(document).ready(function(){ 
    $('#Wrapper').click(function (){ 
        setTimeout(function(){ 
            $('#Article_1').toggleClass('magictime perspectiveDown'); 
        }, 1000);
        setTimeout(function(){ 
            $('#fold12').toggleClass('magictime perspectiveDown'); 
        }, 2000); 
        setTimeout(function(){ 
            $('#fold123').toggleClass('magictime perspectiveDown'); 
        }, 3000);
   }
});