jQuery：隐藏容器，然后在该容器中显示元素

Question

我想用类page_wrapper隐藏容器元素。然后我想在该容器中只显示一个标识为infinite_math_container的元素。

我的代码......

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

问题：$('.page_wrapper').hide();工作正常，但$('#infinite_math_container').show().delay(200);实际上并未显示。

思想？

Answer 1

喜欢@ŁukaszTrzewik说。如果隐藏了元素的父级，则调用show()就不会产生任何影响。

要解决此问题，您可以执行以下操作：

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

这将隐藏除.page_wrapper以外的#infinite_math_container的所有子元素。

OR：

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

这将隐藏.page_wrapper的所有子元素，并在延迟#infinite_math_container毫秒后显示子200。

这两个示例仅在#infinite_math_container元素是.page_wrapper的直接后代时才有效。

Answer 2

使用允许回调的fadeOut尝试：

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

你可以according文档使用hide（）作为回调，但它只是一个偏好。

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

另一种方法是使用setTimeout函数：

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