3

私はできる限りのことをしようとかなりの時間を費やしましたが、これまでのところ答えが見つかりません。

訪問者が正方形の画像をクリックすると、新しい Windows ロゴのような台形に「反転」するアニメーションを作成しようとしています。同時に、この要素の後ろから、画像に関する情報を含む別の div が右にスライドします。

これを作成しても問題ありません。私のサイトの実際の例を参照してください。

(これは現在、Webkit ブラウザーでのみ機能します。これは、ベンダー プレフィックスを取得しておらず、背後にある div がまだ正しくスライドしていないためです。しかし、ここで達成しようとしていることを理解できると確信しています。 Windows 8 のスタート画面のタイル)。

使用されるアニメーションは、中間のキーフレームが削除された animate.css の flipInY です。当初は Hover を使用してアニメーションを実行する予定でしたが、これをモバイル サイトに実装しようとすると当然のことながら困難になるため、jQuery の「onClick」イベントの方が適しているように思えました。

onClick switchClass JQuery関数を機能させることができましたが、最初のアニメーションのみで、2回目のクリックはアニメーションを真に逆にするのではなく、アニメーションを再開するだけです。ここにコードを含めますが、見つけられなかったより良い解決策を探して削除しました。

この質問と回答は問題を解決する方法ですが、それは別の「slideUp」アニメーション用であり、2 つの異なるボタンを使用します。これを、効果を切り替える 1 つのボタンに置​​き換えたいと思います。

私がこれを完全に間違った方法で試みていると思われる場合は、何か他のことを提案してください!

4

4 に答える 4

0

私があなたなら、jQuery を使用しますtoggleClass();

于 2013-05-30T00:58:48.993 に答える
0

試しましたか：

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

ところで非常に素晴らしい効果:)

于 2013-05-29T23:36:27.413 に答える
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

これはうまくいきますか？

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 に答える