如何在点击上为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

也许我不理解你，但：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); 

}); 

Answer 4

请问

这对你的工作？

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/