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 !
精彩评论