javascript - 是否可以为 Jquery .CSS 背景更改设置动画?

标签 javascript jquery

我使用这个将背景图像附加到 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/

相关文章:

javascript - 替代 javascript 事件中的 `touchmove`

javascript - 使用javascript自动将id和内容放入表td中

jquery - 如何无限期地轮换多个类(class)?

javascript - 需要切换 2 个 DIV 的 DIV 可见性

javascript - 检查 JS 中未定义的更短方法

javascript - 动态生成的元素触发的事件不会被事件处理程序捕获

javascript - Backbone.js 将更改事件绑定(bind)到模型内的集合

jquery - 如何在 iPhone 和 iPad 上创建固定/绝对位置工具提示?

jquery - jQuery UI 1.6 文档

javascript - Kendo UI TreeView 追加新级别