Using .fadeOut(), but I want it to STAY faded?

Question

I am using this code to make a certain div (#extras) fade out.

$(document).ready(function() {

            for(var i = 1; i <= pageLimit; i++) {
                $('body').append('<div id="page' + i + '" name="page' + i + '" class="touch"></ div>' ); 
            }

            $('body').append('<div id="extras" class="showUp">..all content needed goes in heree...</div>');
            $(window).load(function() {
                $('div#extras').delay(100).fadeOut(4000); 
            });
});

CSS:

div#extras {
    height:100%;
}

&

body > div.showUp {
    display: block !important;
    height:100%;
}

It fades out nicely, but then pops back up once its done the fading animation. How would I make it stay faded? In another function I will have it fade back in.

This is the defaulted css I have from the JQtouch sample I have been working on..

body > * {
background: transparent;
-webkit-backface-visibility: hidden;
display: none;
position: absolute;
left: 0;
text-align:center;
width: 100%;
-webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
height: 100% !important;
}

Thanks!

Would the fact that the extras div was inserted into the page by the .append() function have anything to do with making it pop back up?

Answer 1

how about just using .fadeTo(0) (or some other number if you want it to show 'opaquely' i.e. .fadeTo(250) etc...

your solution would be:

$("#extras").fadeTo(500, 0);

this might be an avenue worth exploring.

jim

[edit] - see http://api.jquery.com/fadeTo/

Answer 2

I've had success using:

$("#element").fadeTo("fast", 0.33);

The speed parameter can be set to "slow" if you want to make the fading take more time.