3

スライドショーに入る要素があり、スライドが入ると、この要素はjQueryUI効果explodeを使用して表示されます。

$e.show('explode', {}, 1000);

最初に実行したとき、要素がまったく表示されていませんでした。そこで、「ああ、z-indexでなければならない」と思い、要素のz-indexを10に設定して、position定義されていることを確認しました。（スライドのz-indexは5です）

これにより、エフェクトの完了後に画像が表示されます。私はテストのためにスライドを隠しました、そして確かに、アニメーションはスライドの後ろで起こっていましたz-index。

アニメーションが終了するまで要素が表示されないのはなぜですか？

4

1 に答える 1

6

何が起こっていますか

特定の要素がjQueryUIでアニメーション化されている場合、効果によっては、要素自体が複製される場合があります。操作している要素（$ e）は実際には非表示であり、アニメーションの時点ではDOMの一部ではないため、ここではCSSルールは役に立ちません。一部のルールはjQueryを使用して複製された要素に適用されますが、z-indexはそれらの1つではありません。

CSSアニメーションで修正する

要素を直接操作し、要素のクローンを作成する必要がないCSSアニメーションを使用することをお勧めします。これにより、効果がexplode少し複雑になりますが、CSSルールを維持するだけでなく、CSSアニメーションによってjQueryUIアニメーションよりもパフォーマンスが大幅に向上します。（jQuery UIは、アニメーションの各「ステップ」を個別に適用します。つまり、多くの再描画を意味します）。ただし、これに関する制限は、IEがまだこれに匹敵しないように見えるため、ブラウザー間の互換性です。

z-indexで修正する

アニメーションにjQueryUIを使用することに夢中になっている場合、またはブラウザー間の互換性がないリスクを冒すことができない場合でも、希望はあります。私のテストでは、'cloned'要素は一時的に。のクラスを追加しui-effects-explodeます。元の要素のクローンを作成する必要があるほとんどのjQueryUIアニメーションは、同様の構文（ui-effects-*）のクラスを適用しているようです。

個々の効果に対するフラストレーションを軽減するためのキャッチオールは、次のようなCSSルールを作成することです。

[class^=ui-effects] {
    z-index: 10;
}

ここで、^=は「で始まる」を意味します。これにより、jQuery UI名前空間内の複製された要素にz-indexが適用され、問題が解決するはずです。

于 2012-05-30T22:33:15.430 に答える