应用淡入淡出的问题答案

【问题标题】：Issue with applying fadeIn and FadeOut应用淡入淡出的问题
【发布时间】：2011-04-30 08:56:07
【问题描述】：

我创建了七个 html 页面，下面的代码用于引用并移动到后续页面。我还添加了一些 jquery 来淡入淡出，只是页面的一部分称为 main。当网页加载时，在它移动到下一页之前淡出。我遇到的问题是，我没有淡出的部分向上移动。有没有办法让不褪色的部分保持在原来的位置？

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

});

【问题讨论】：

标签： jquery xhtml

【解决方案1】：

我建议你将它淡出到不透明度很低的地步，人眼、吸血鬼或其他人都看不到它......好吧，我可能已经过火了，但是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);       
});

【讨论】：

同意，这样你就可以保持同样的高度。甚至可以尝试 fadeTo 0.001，因为 0.01 仍然略微可见。

【解决方案2】：

您遇到的问题是由于一旦元素获得display: none; 属性（在fadeOut() 的末尾），浏览器会将其视为高度为零，导致其下方的所有内容都跳转起来。

因此，我想到了两个解决方法：您可以将 #main div 与另一个 div 包装起来，该 div 与您的 height 相同 #main div 以便它占用该空间或，您可以使用绝对定位将#main div 下方的任何内容保持在同一位置。

希望这会有所帮助！

【讨论】：