0

AppleのiPhoneホームページのようなホームページでいくつかのアニメーションをしなければなりません

http://www.apple.com/iphone/

鉱山は非常に単純で、divの左から右へのスライドイン（フェードインあり）、数秒の滞在、スライドアウト、そして次のdivへの同じ効果です。

サイト内の他のほとんどすべてにjQueryを使用しているため、jQueryの.animate（）を使用することを計画していますが、いくつか疑問があります。

  1. jQueryはオブジェクトをアニメーション化するための最良の方法ですか？CSS3トランジションの使用も検討しましたが、jQueryはそれほど最新ではないブラウザー（IE cough ... cough ...）との互換性が高いと思われます。

  2. アニメーションを起動するイベントは何でしょうか？アニメーション化する前に、div内の画像がロードされていることを確認するにはどうすればよいですか？

  3. 要素の初期状態は不透明度0％になります。その後、要素を100％にアニメートできます。誰かがJavaScriptをオフにしている場合、またはページにエラーがあり、アニメーション関数が実行されない場合、要素は表示されないままになります。初期状態を不透明度100％にしてから、0％に変更してアニメーション化すると、要素が表示される前にコードで0％に変更しないと、点滅します。これを防ぐことはできますか？

  4. アニメーションの時間を計る最良の方法は何ですか？$（element）.delay（N）がある場合、Nは前の要素が入り、表示され、出て行くのにかかる時間です。

私はこれがおそらくどこかでカバーされているかもしれないことを知っています。これを達成する方法についての良い記事やチュートリアルがある場合は、それを指摘してください。ありがとう。

4

2 に答える 2

0

カスタム スライダーの作成には、最初に思われるよりも時間がかかります。nivosliderやその他の jQuery スライダーなどのプラグインを使用することをお勧めします。トランジションと期間を選択して、目的の効果を得ることができます。

本当にゼロから構築したいのなら、私は間違いなくjQueryを選びます。

  1. あなたは互換性について正しいです.jQueryはその点でCSS3よりも優れています.

  2. 私はjavascript間隔に行きます。こちらをご覧ください：シンプルな画像の読み込み

  3. ユーザーが JavaScript をオフにしている場合、スライドはアニメーション化されません。まばたきを防ぐには、アニメーションを開始する前に不透明度を変更する必要があります。

詳細については、jQuery ドキュメントを参照してください。

于 2012-07-12T01:24:38.433 に答える
0

jQuery スライドショーを実現しようとしているようです。私は自分で試したことはありませんが、jQuery Cycle Pluginはあなたが望むことを実行できるようです。

さらに、点滅/JavaScript サポートなしの問題を解決するためにhead、ドキュメントのセクションに次のようなものを追加できます。

<noscript>
  <style type="text/css">
    .hidden { visible: true; !important }
  </style>
</noscript>
于 2012-07-12T01:29:15.327 に答える