CODEWITHSUNDEEP
javascriptjquerycss
Andrew Dom Zappa
Andrew Dom Zappa

Reputation: 21

Fade entire page except certain class

I want to fade the whole page opacity out then in except a certain class on page load. (timer)

I'll be able tweak it into my current code.

Upvotes: 1

Views: 1167

Answers (2)

nnnnnn
nnnnnn

Reputation: 150020

If the elements that you don't want to fade are direct descendants of the body then you can do it in one line:

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

Demo: http://jsfiddle.net/Be2m5/

(Obviously you can substitute your own animation methods as desired.)

If the elements that you don't want to fade are descendants of other elements I'm not sure how you make it work, because when the parent elements fade they take their children with them...

EDIT: It occurred to me that there is a better way to go about this: rather than fade the elements in and out, put a single blank (white background) div over the entire page and fade it in to cover all the other elements except for the ".nofade" ones. Give the ".nofade" elements a higher z-index than the blank div:

<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>

Demo: http://jsbin.com/ucofuz/2/edit#preview

Upvotes: 4

roma
roma

Reputation: 41

You can try something like this

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#content-wrapperHide').fadeOut(1000);        
            $('#content-wrapperShow').fadeIn(1000);
        });
    </script>

    <style type="text/css">
        #content-wrapperShow
        {
            display: none;  
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            document.write( '<div id="content-wrapperHide">' );
        //--><!]]>
    </script>
     Hide on load
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            document.write( '</div><!-- content-wrapperHide -->' );
        //--><!]]>
    </script>


    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            document.write( '<div id="content-wrapperShow">' );
        //--><!]]>
    </script>
    Show on load
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            document.write( '</div><!-- content-wrapperShow -->' );
        //--><!]]>
    </script>
</body>
</html>

Two div containers. First is hiding on page load, second is showing.

demo

Upvotes: 0

Related Questions