Проблема с применением FadeIn и FadeOut

Question

Я создал семь HTML-страниц, и приведенный ниже код используется для ссылки и перехода на следующую страницу.Я также добавил немного jquery в fadeIn, просто раздел страницы под названием main.когда веб-страница загружается и исчезает непосредственно перед тем, как перейти к следующей странице.Проблема, с которой я сталкиваюсь, состоит в том, что раздел, который я не исчез, перемещается вверх.Есть ли способ сделать так, чтобы секция не выцветала, оставалась на своем месте?

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

});

Answer 1

Я полагаю, что вы затушевываете его до такой степени, что непрозрачность настолько низка, что человеческий глаз, вампир или иным образом не может увидеть ее ... Хорошо, я мог бы зайти с этим, но все же:

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);       
});

Answer 2

Проблема, с которой вы столкнулись, вызвана тем, что, как только элемент получает свойство display: none; (в конце fadeOut()), браузер будет обрабатывать его как имеющий нулевую высоту, заставляя все, что ниже него, перепрыгивать до.

Таким образом, на ум приходят два обходных пути: вы можете либо обернуть #main div другим div, который имеет height с вашим #main div, чтобы он занимал это пространство или Вы можете использовать абсолютное позиционирование, чтобы держать все, что находится ниже вашего #main div в той же позиции.

Надеюсь, это поможет!