1

以下のページで、CSS トランジション (div を元のサイズである 1.05 にスケーリングするため) を jQuery アニメーションと一緒にうまく再生するのに問題があります。

http://www.griffinlive.com/video-packages

色付きの div の 1 つにカーソルを合わせると、動作中の CSS トランジションを確認できます。[Email Us] ボタンをクリックすると、アニメーションがトリガーされますが、アニメーションは途中で終了します。

CSS アニメーションを削除すると、jQuery アニメーションが正しく表示されることを確認しました。

私は次の 2 つの行動方針を特定しました。

  • スタイル シートから CSS 変換を削除し、jQuery を使用して効果を再作成します。
  • アニメーションをトリガーするリンクをユーザーがクリックしたときに、CSS 変換を削除します。

アニメーションが削除される前にゼロにリセットできるため、最初のオプションの方が優れていると思います。しかし、私はより良いアイデアを受け入れるので、この小さな問題をここに投稿します。

ご提供いただけるご支援をよろしくお願いいたします。

4

1 に答える 1

1

私も最初のオプションを選びます。

私はこのようにクリックされていないアニメーションを作成し、見栄えのする方法でそれらを非表示にします (個人的には、不透明度 0 エフェクトが好きです。.fadeOut()これにより、jQuery を介して、目に見えないが不透明な要素を操作できます)。

$('#prices>div').not($clicked).animate({...});

次に、次のコードのようなもので、クリックされた要素をアニメーション化して左側に移動します。

$('#prices>div').is($clicked).animate({'left':'0'});

では、右側にメールフォームを表示させたいと思いませんか? 私はそれをフェードインします。

私はこれらのコードをテストしていないことに注意してください。私の意図を説明するために頭のてっぺんから書いただけです。これが役立つことを願っています。

于 2012-05-20T02:31:54.077 に答える