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/

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

4 个答案: