Javascript 加载时页面淡入淡出_Javascript_Jquery_Css_Fade

Javascript 加载时页面淡入淡出

javascript jquery css

Javascript 加载时页面淡入淡出,javascript,jquery,css,fade,Javascript,Jquery,Css,Fade,我试图使用j-query在加载时淡入我的页面正文，但是由于某些原因，正文的背景图像不受j-query的影响。请参阅下面我的代码：标题部分中的J查询代码： <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(

我试图使用j-query在加载时淡入我的页面正文，但是由于某些原因，正文的背景图像不受j-query的影响。请参阅下面我的代码：

标题部分中的J查询代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('body').fadeIn(2000);
});
</script>

根据j-query代码，正文中包含的所有内容（div/段落/标题等）在加载时都会淡入淡出，但正文的背景图像（body.png）会随页面立即加载。有人能告诉我上面的代码有什么问题吗？

body

的行为很滑稽。您需要将整个页面的内容包装在另一个

div

中，然后淡入

<body>
    <div id="wrapper">
        # Page Contents #
    </div>
</body>

jQuery：

$(document).ready(function(){
    $('#wrapper').fadeIn();
});

看这个。

我不确定它是否也会影响背景图像，但是您也可以在不使用jQuery的情况下进行淡入效果。至少在支持CSS3的浏览器中：

@keyframes fadein{
   from{opacity:0;}
   to{opacity:1;}
}
.someElement{
   animation: fadein 2s;
}

像@ITFarmer wait一样，您可以在CSS3中执行此操作，但也可以使用CSS3设置背景图像的动画

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeinbg {
    from {
        background-image: none;
    }
    to {
        background:url('body.png') no-repeat;
    }
}

.container {
    animation: fadein 2s;
}

.body {
    animation: fadeinbg 2s;

你可以淡出html而不是正文谢谢，我将继续使用包装器的想法。干杯吊环broken@JaydenLawson嘿，谢谢你，伙计！我已经更改了我的用户名，但现在又恢复工作了。不用担心Robbie Wxyz！在快速修复方面做了大量工作：）感谢这一点-身体背景图像仍然会立即加载，但很高兴知道，使用关键帧和Jquery:-）可以实现淡入淡出功能

@keyframes fadein{
   from{opacity:0;}
   to{opacity:1;}
}
.someElement{
   animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeinbg {
    from {
        background-image: none;
    }
    to {
        background:url('body.png') no-repeat;
    }
}

.container {
    animation: fadein 2s;
}

.body {
    animation: fadeinbg 2s;