0

このプロジェクトには、いくつかの静的コンテンツ (タブを含む) と、さまざまな条件 (クリック、ホバー、タイマー) で変化するコンテンツを含むボックス (div) があります。これらの動的コンテンツ ビューはそれぞれ、個別の div にあります。

すべての動的コンテンツは最初はcssで隠されているため、ページの初期ロードを含め、これらすべてのケースを処理できる関数を作成しようとしています. この関数は、物事を追跡するために変更する必要がある親ボックスと、変更したいビューを受け取ります。

そこで、最初にすべてのビューをフェード アウトして何もないことを確認し、新しいビューをフェード インします。コールバックが順序通りに機能していないことにすぐに気付き、promise() 関数に出くわしました。残念ながら、これにより、私が試したすべてのブラウザー (IE、Chrome、および Firefox) でちらつきが発生します。Chrome ではごくたまにしかありませんでしたが、他の Chrome ではほぼ一定です。

$(container).children('.content_view').fadeOut(transition);
$(container).children('.content_view').promise().done(function() {
    $(next).fadeIn(transition);
});

それが現時点での私のコードのビジネス上の目的です。これを行うためのより良い方法、またはちらつきをなくす方法はありますか? 残念ながら、このページはほとんどの場合、動作の悪いブラウザで表示されます。

遅延で遊んだ後、問題はタイミングの問題であると思われます。要素を時期尚早に削除したり、別の要素を表示したりすると、最終的なレイアウトに到達するまでレイアウトが一時的に変更されます。promise() 関数がそのような遅延を実装していると思われます。

編集：

私にとってうまくいくと思われる解決策を見つけました。私の最初のフェードアウトは、複数のビューが何らかの理由で非表示になったイベントを処理することを目的としていたため (これは他の理由で頻繁に発生していました。mouseover と mouseout の代わりに mouseenter と mouseleave を使用してください)。以前の呼び出しからフェードの過程にあるものはすべて、通常のフェードを実行します。

$(container).children('.content_view').filter(function(){return ($(this).css('opacity') < 1)}).each(function() {
    $(this).stop();
    $(this).css('opacity',0);
    $(this).css('hidden','none');
});

if ($(container).children('.content_view').filter(function(){return ($(this).css('display') != 'none');}).length > 0)
    $(container).children('.content_view').filter(function(){return ($this.css('display') != 'none';}).fadeOut(transition, function() {
    $(content).fadeIn(transition);
});
else
    $(content).fadeIn(transition);

それが理にかなっていることを願っています。フィルター機能を今まで知りませんでした。とても便利です:)

私の場合、これが機能するのは、これがコンテンツのいずれかが交換される唯一の方法であり、各呼び出しの最後に 1 つの要素ツリーのみが完全に表示される (またはそこに到達する) ためであることに注意してください。それが次のものまでに明らかにされていない場合、それはすぐに殺され、置き換えられます。

4

1 に答える 1

0

これはうまくいくはずです：

$(container).children('.content_view').fadeOut(transition, function() {
    $(next).fadeIn(transition);
});

次に試してください：

$(container).children('.content_view').each(function(){
    $(this).fadeOut(transition, function() {
        $(next).fadeIn(transition);
    });
});

ただし、おそらく最も優れた解決策は、CSS トランジションを使用することです。その可能性はありますか？これはどのブラウザで動作する必要がありますか?

于 2012-04-11T11:40:15.320 に答える