Issue with applying fadeIn and FadeOut

I have created se开发者_JAVA技巧ven html pages and the code below is used to refersh and move to the subsequent page. I have also added a bit of jquery to fadeIn just a section of the page called main. when the webpage loads, and fades out just before it moves to the next page. The problem i encounter is that, the section i have not faded out moves up. Is there a way to make the section not fading remain in its position?

$(document).ready(function() {
    var intervalId = window.setInterval(fade_effect, 4000);      
    $("#main").css("display", "none").fadeIn("slow");        
    function fade_effect() {        
        $("#main").fadeOut("slow"); 
    }

});

I suggest that you fade it out to the point where the opacity is so low, it cannot be seen by the human eye, vampire or otherwise....OK, I may have gone overboard with that, but whatevs:

var fade_effect = function() {        
    $("#main").fadeTo("slow", 0.001); 
};

$(document).ready(function() {
    var intervalId = window.setInterval(fade_effect, 4000);      
    $("#main").css("display", "none").fadeTo("slow", 1);       
});

The issue you're experiencing is caused by the fact that once an element gets a display: none; property (at the end of fadeOut()), the browser will treat it like has zero height, causing everything below it to jump up.

Therefore, two workarounds come to mind: you could either wrap the #main div with another div that has the same height as your #main div so that it keeps that space occupied or, you could use absolute positioning to keep whatever is below your #main div in the same position.

Hope this helps !