jQuery: Container ausblenden, dann Element in diesem Container anzeigen

Question

Ich möchte ein Containerelement mit Klasse page_wrapper ausblenden. Dann möchte ich nur ein Element in diesem Container mit der ID infinite_math_container anzeigen.

Mein Code ...

$('.page_wrapper').hide(); 
$('#infinite_math_container').show().delay(200); 

Problem: Die $('.page_wrapper').hide(); funktioniert gut, aber die $('#infinite_math_container').show().delay(200); zeigt nicht wirklich.

Gedanken?

Answer 1

Wie @ sagte ŁukaszTrzewik. Wenn das übergeordnete Element eines Elements ausgeblendet wird und show() aufgerufen wird, hat dies keine Auswirkungen.

Um dies zu beheben, können Sie so etwas tun:

$(".page_wrapper").children().not("#infinite_math_container"‌​).hide(); 

Diese alle Elemente Kind von .page_wrapper außer #infinite_math_container wird verstecken.

OR:

$(".page_wrapper").children().hide().find("#infinite_math_container"‌​).delay(200).show(); 

, die alle untergeordneten Elemente .page_wrapper verbergen und das Kind #infinite_math_container nach einer Verzögerung von 200 Millisekunden zeigen. Diese beiden Beispiele funktionieren nur, wenn das Element #infinite_math_container direkt von .page_wrapper stammt.

Answer 2

Probieren Sie es fadeOut verwendet, die einen Rückruf erlaubt:

$('.page_wrapper').fadeOut(0, function() { 
    $('#infinite_math_container').show(); 
}); 

Sie können die Dokumentation Verwendung hide() als Rückruf, aber es ist nur eine Präferenz according.

$('.page_wrapper').hide(0, function() { 
    $('#infinite_math_container').show(); 
}); 

Ein anderer Weg ist die setTimeout Funktion:

$('.page_wrapper').hide(); 
setTimeout(function(){ 
    $('#infinite_math_container').show(); 
}, 2000);