FadeIn内容会在加载时跳转

Question

我正在做一个全屏图像的淡出。问题是，当包装器淡入其内容（中间的图像）时，跳跃大约为20px。

知道为什么会这样吗？

这是我的代码：

    // Home FadeIn
    function home_timeout(){
        setTimeout(function(){
            $('#intro-image').fadeOut(700);
            $('#wrapper').fadeIn(700);
        }, 2000);
    }

第一次加载页面而不是缓存时会发生这种情况。

我已经为包装器添加了一个高度，但它仍然没有修复它：

body.home #wrapper {
   display: none;
   height: 777px;
}

Answer 1

不使用display设置为none，而是使用opacity：

body.home #wrapper {
   opacity:0;
   height: 777px;
}

然后使用fadeTo()方法：

function home_timeout(){
        setTimeout(function(){
            $('#intro-image').fadeOut(700);
            $('#wrapper').fadeTo(700,1);
        }, 2000);
    }

试试看......

Answer 2

您可以尝试将高度添加到导航列表....

添加
    UL     {         高度：110px;     }

我希望这能解决你的问题。