javascript - 淡化除特定类别外的整个页面

Question

除了页面加载时的某个类之外，我想淡化整个页面的不透明度。 (计时器)

我可以将它调整到我当前的代码中。

Answer 1

如果您不想淡出的元素是主体的直接后代，那么您可以在一行中完成:

$("body").find(":not(.nofade)").fadeOut().fadeIn();​ // fade out/in all but class "nofade"

演示:http://jsfiddle.net/Be2m5/

(显然，您可以根据需要替换自己的动画方法。)

如果您不想淡出的元素是其他元素的后代，我不确定您是如何让它工作的，因为当父元素淡出时，它们会带走它们的子元素...

编辑: 我想到有一个更好的方法来解决这个问题:与其淡入淡出元素，不如在整个页面上放置一个空白(白色背景)div，然后淡入以覆盖除“.nofade”之外的所有其他元素。为“.nofade”元素提供比空白 div 更高的 z-index:

<style>
.cover {
    position : absolute;
    top : 0px; bottom : 0px; left : 0px; right : 0px;
    background-color: white;
    z-index: 1;
    opacity : 0;
}
.nofade {
    position: relative;
    z-index: 2;
}​    
</style>
<script>
$(document).ready(function() {
     $("<div/>").addClass("cover")
                .appendTo("body")
                .animate({opacity:1}, 1000).delay(300)
                .animate({opacity:0}, 1000, function() { $(this).remove(); });
});
</script>

演示:http://jsbin.com/ucofuz/2/edit#preview