1

Firefox 3 と IE7 の両方で動作する jQuery 1.3 アニメーション遷移はありますか?

複数のテーブル行 (25 以上) を持つテーブルがあり、一部の行は非表示になっています (これらの行はすべて共通のクラスを共有しています。この例では ".hidden" です)。テーブル ヘッダーには、非表示の行を表示する関数にバインドされた [もっと表示] リンクがあり.click()、[もっと表示] を [少なく表示] に変更.click()し、反対のことを行う関数に変更します。

各.click()関数には、次のような行があります

$(this).parents("tbody").children("tr.hidden").show();

「表示を減らす」機能ではwith.show()に置き換えられました。.hide()

.show()ただし、 /.hide()をに置き換えようとすると、有効になるまでに 1 分かかることを除いて.fadeIn()/.fadeOut()、IE はほぼ同じようにレンダリングします。そこには本当のアニメーションはありません。IE では劣りますが、Firefox ではうまく動作します。.show()/.hide().hide()

を使用しようとすると.slideDown()/.slideUp()、IE でも同様にぎこちなく.show()/.hide()、トランジションの完了直後に奇妙なパルス効果があることを除けば、ほぼ同じです。Firefox 3 も同様にチョークします。明らかに、表示されているテーブル行の行幅を忘れて、全体がひどく見えます。

では、アニメーションは IE7 ではうまくいかないのでしょうか? この場合、両方のブラウザで機能する、優雅でスムーズな移行を実現する方法はありますか?

4

3 に答える 3

5

多くの場合、複数の同時アニメーションを持つことはIEにとって難しい場合があります。Javascriptエンジンは、Safari、Firefox、Chromeの近くにはありません。これはIE6とIE7にも当てはまります。私はまだIE8を使用していません。

少し役立つことがあるのは、アニメーション化しようとしている要素に静的な高さを設定することです。CSS /レイアウトの観点からは、これは通常理想的ではありませんが、これにより、jQueryは、要素の高さをアニメーション化する前に、最初に各要素の高さを計算する必要があるタスクをスキップできます。

一般的に、一眼レフカメラと同じようにアニメーションにアプローチすることができます。（ここで私と一緒にいてください）。スポーツイベントの連射ショットを撮ろうとしている場合、写真家なら誰でも、フォーカス、ISO、シャッタースピードを事前に設定することをお勧めします。このように、カメラは各ショットの間にこれらすべてを計算する必要はなく、シャッターボタンを押したままクリック-クリック-クリック-クリックするだけです。A-チームスタイル。

とにかく、アニメーションに関しては、アニメーションを実行するためにJavaScriptが計算する必要があることを考えてみてください。不透明度、高さ、計算された高さ（要素の幅+境界線+パディング）、画面の位置はすべて、開始するのに適した場所です。

多くの場合、アニメーションの開始時にjQueryがDOMに追加しているものを実際に確認できます（Firebugを使用）。たとえば、不透明度のアニメーションでは、style = "opacity：1;"を見ることができます。0へのカウントダウンが始まる直前に追加されます。

于 2009-01-19T23:03:05.880 に答える
1

ブラウザー間のパフォーマンスについて話すとき、私は過度に明白ではありません。率直に言って、FF と IE はかなりうまく処理できますが、webkit を泣かせる重い JS アニメーションをいくつか見てきました。

ブラウザーにはさまざまな CSS および JS 実装があり、パフォーマンスの低下の背後にある原因を特定するのが難しい場合があることを考慮する必要があります。

IEを取ります。ブロック レベルの要素 4000x4000 と 2x2 の透明な gif を繰り返すように設定している場合、禁止されている要素を移動するたびに、IE は 2x2 の gif を再描画し、それぞれのアルファを 2000 回計算します。FF は背景をキャッシュするか、大幅に異なる再描画を行いますが、いずれの場合もパフォーマンスは比類のないものです。マニュアルには、自分が何をどのように行うかに注意する必要があるとは書かれていませんでした。

于 2009-01-21T05:31:29.310 に答える
1

jQuery の互換性ページによると、このようなことはバグであり、報告する必要があります。

于 2009-01-19T21:58:01.660 に答える