JQuery：複数のオブジェクトをフェードアウトした後にフェードインすると、フリッカーが発生します

Question

このプロジェクトでは、静的コンテンツ（タブを含む）とさまざまな条件（クリック、およびタイマー）。これらの各動的コンテンツビューは、別々のdivにあります。

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

私は最初にすべてのビューをフェードアウトして、そこに何もないことを確認し、新しいビューをフェードインします。コールバックが順序どおりに機能していないことをすぐに知ったので、promise（） 。残念ながら、これは試したすべてのブラウザ（IE、Chrome、Firefox）でちらつきが発生します。クロムではそれはたびにしかなかったが、他のものではほぼ一定していた。

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

これは現時点で私のコードのビジネス上の終わりです。これを行うためのより良い方法、またはフリッカーを除去するための何らかの方法がありますか？残念ながら、このページは大部分のブラウザで見られます。

遅れて遊んだ後、私はその問題がタイミング問題であると思われます。エレメントの早期削除、または別のエレメントの外観は、最終レイアウトに達するまで私のレイアウトを一時的に変更させます。私はpromise（）関数がそのような遅延を実装していると思われます。

EDIT：

私は私のためにうまく動作するようです解決策を見つけました。私の最初のフェードアウトは、複数のビューが何らかの形で非表示になった（他の理由で多く発生していた、mouseoverとmouseoutの代わりにmouseoverとmouseoutを使用する）イベントを処理するためのものだったので、ただちに殺す前の呼び出しからフェードする過程にあるものは、通常のフェーディングを行います。

$(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つの要素ツリーが完全に表示されたままになる（またはそこに到達する）コール。もしそれが次のものによって明らかにされていなければ、すぐに殺され、置き換えられます。

Answer 1

これは動作するはずです：

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

その後、試してみてください。

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

しかし、おそらく最も素晴らしい解決策は、CSSトランジションを使用することです。それは可能でしょうか？これはどのブラウザで動作するのですか？