我使用这个将背景图像附加到 body 元素:
<script>
$(document).ready(function(){
$("body").css( "background" , "url(someimage.jpg)");
});
</script>
这很好,但是背景图像真的很大,我想在它们全部加载完后使用 fadein() 或其他方法淡化它们。但是,我似乎无法找到使用 jQuery 或 javascript 执行此操作的方法。有吗?有什么聪明的建议吗?如果有帮助,我可以导入 jquery-ui 库。
明确地说,我需要做的事情是这样的:
Page loads -> Image finishes loading -> Image fades into being the background image for the body element
最佳答案
好吧,我想出来了,但这是重复的,因为@am 不建议我 ( duplicate question )。
使用我的解决方案:http://jsfiddle.net/kRjrn/8/
HTML
<body>
<div id="background">.
</div>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</body>
JavaScript
$(document).ready(function(){
$('#background').animate({ opacity: 1 }, 3000);
});
CSS
#background {
background-image: url("http://media.noupe.com//uploads/2009/10/wallpaper-pattern.jpg");
opacity: 0;
margin: 0;
padding: 0;
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
}
关于javascript - 是否可以为 Jquery .CSS 背景更改设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11050444/