3

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

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

创建这个很好，在我的网站上查看一个工作示例，这里：

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

使用的动画是来自 animate.css 的 FlipInY，中间关键帧被移除。我最初打算使用 Hover 来运行动画，但是尝试在移动网站上实现这一点是可以理解的，因此 jQuery 'onClick' 事件似乎是一个更好的选择。

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

这个问题和答案是解决问题的一种方式，但是它适用于不同的“slideUp”动画并使用两个不同的按钮，我宁愿用一个可以切换效果的按钮代替。

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

4

4 回答 4

0

也许我不明白你，但是：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);

});
于 2013-05-30T20:18:22.533 回答
0

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

于 2013-05-30T00:58:48.993 回答
0

你试过了吗：

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

非常好的效果顺便说一句:)

于 2013-05-29T23:36:27.413 回答
0

这对你有用吗？

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/

于 2013-05-30T22:12:24.617 回答