Jquery 如何在单击时设置div动画，然后在第二次单击时反转动画？

我已经花了好几个小时试着做任何我能做的事情，但到目前为止我找不到任何答案

我正在尝试创建一个动画，访客点击一个正方形的图像，它将“翻转”成一个梯形，很像新的Windows徽标。同时，从该元素后面，另一个div将滑到右侧，其中包含有关图像的信息

创建这个很好，请参见一个工作示例

（这目前只适用于webkit浏览器，因为我还没有时间讨论供应商前缀，而且后面的div还没有正确滑出，但我相信您可以理解我在这里试图实现的目标—比如Windows 8开始屏幕分幅。）

使用的动画是animate.css中的flipInY，中间关键帧已删除。我本来打算使用Hover来运行动画，但是在移动站点上实现这一点是可以理解的，因此jQuery“onClick”事件似乎是一个更好的选择

我已经成功地让onClick-switchClass JQuery函数工作了，但只对第一个动画起作用，第二次单击只会再次启动动画，而不是真正地反转动画。我想在这里包括代码，但我删除了它，以寻找更好的解决方案，我还没有找到

我真的很感激任何帮助，如果你认为我的尝试是完全错误的，请提出其他建议

您是否尝试过：

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari and Chrome */

---

非常好的效果顺便说一句：）

如果我是你，我会使用jQuery

也许我不理解你，但是：

html:

---

这对你有用吗

---

工作示例：

嘿，伙计，我喜欢你网站上的设计！谢谢！还没有，但谢谢你的欣赏！我已经尝试过了，但它不会将正方形“还原”到其原始状态，如果您再次尝试该站点，我添加了此代码，但动画仅在我将鼠标悬停在长方体上时播放，当我移动鼠标时，它只会弹回其原始形式。我尝试过切换类，添加/删除类和switchClass的组合，但是它不想反转动画，或者我用了错误的方法。简单的变换，比如改变背景颜色，效果不错，但我想实现的可能太复杂了，我不明白为什么。这太棒了，非常感谢！我刚刚在Javascript中快速添加了一些其他动画，例如更改背景颜色，这可能吗？“我不确定我是否理解您的意思：使用动画更改背景？例如，不透明度平滑地从红色变为黄色。。。

<div class="wrap">
<div class="over">yellow</div>
<div class="box">red</div>
</div>

$('.over').click(function() {
$('.box').animate({marginLeft: '150',
                   width: '120',
                   height: '120',
                   marginTop: '-10'
                  }, 300);  


setTimeout( function(){
    $('.box').css('zIndex',80);
} , 400); 

$('.box').animate({marginLeft: '0'}, 300).animate({width: '100', height: '100', marginTop: '0'}, 300);
});

$('.box').click(function() {
$('.over').animate({
                    marginLeft: '150',
                    width: '120',
                    height: '120',
                    marginTop: '-10'
                    }, 300).css('zIndex',5); 

$('.box').css('zIndex',10);
setTimeout( function(){
    $('.over').css('zIndex',70);   
} , 400); 
$('.over').animate({
    marginLeft: '0'}, 300)
    .animate({width: '100',
          height: '100',
          marginTop: '0'}, 300);

});

$('#rectangle').click(function() {
  $(this).toggle(
      function(){
        $(this).flippy({
            color_target: "#aa0621",
            direction: "right",
            duration: "750"
         });
      },
      function(){
        $(this).flippy({
            color_target: "#aa0621",
            direction: "left",
            duration: "750"
         });
      }
  );
});