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

Question

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

我正在尝试创建一个动画，其中访问者单击一个方形图像，该图像将“翻转”为类似于新 Windows 徽标的梯形形状。同时，从该元素后面，另一个 div 将滑出到右侧，其中包含有关图像的信息。

创建这个很好，查看一个工作示例on my site, here:

（这目前仅适用于 webkit 浏览器，因为我还没有找到供应商前缀，并且后面的 div 还没有正确滑出，但我相信你可以理解我在这里想要实现的目标 -类似于 Windows 8 开始屏幕磁贴。）

使用的动画是来自 animate.css 的 FlipInY，其中中间的关键帧被移除。我原本打算使用 Hover 来运行动画，但是尝试在移动网站上实现它会很困难，因此 jQuery 'onClick' 事件似乎是一个更好的选择。

我已经设法让 onClick switchClass JQuery 函数工作，但仅适用于第一个动画，第二次单击只是再次启动动画，而不是真正反转它。我会在此处包含代码，但我将其删除以寻找我尚未找到的更好的解决方案。

This question and answer goes a way to solving the problem, however it is for a different 'slideUp' animation and uses two different buttons, which i'd rather replace with one button that would toggle the effect.

非常感谢任何帮助，如果您认为我以完全错误的方式尝试此操作，请提出其他建议！

Answer 1

你试过了吗：

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

BTW 效果非常好 :)

Answer 2

如果我是你，我会使用 jQuery toggleClass();

Answer 3

这对你有用吗？

http://blog.guilhemmarty.com/flippy/jquery.flippy.min.js

$('#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"
         });
      }
  );
});

工作示例：http://jsfiddle.net/H6wA3/5/

Answer 4

也许我不明白你，但是：LIVE DEMO

html:

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

js:

$('.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);

});