Question

我创建了七个html页面，下面的代码用于引用并移动到后续页面。我还在fadeIn中添加了一些jquery，只是名为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

我建议你将它淡化到不透明度如此之低的程度，人眼，吸血鬼或其他方式都看不到......好吧，我可能已经过分了，但是whatevs：< / p>

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包裹在一起{1}}这样可以保持占用空间，或者您可以使用绝对定位来保留#main div下方的任何位置。

希望这有帮助！

应用fadeIn和FadeOut时出现问题

2 个答案: