javascript - 带有背景图像的 jQuery 淡入

标签 javascript jquery html css

我正在使用 jQuery 淡入我的主页,但它目前是从白色淡入。有没有办法从黑页淡入?这与加载 iframe 时的情况相同,它会闪烁白色。我知道这可以修复,所以我认为可能也有修复方法。

CSS:

html {
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    display: none;
}
body {
    margin: 0;
    height: 100%;
    padding-left: 40px;
    padding-top: 25px;
}

脚本:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="home.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('html').fadeIn(3000);
    })
</script>
</head>
<body>
</body>
</html>

最佳答案

是的,尝试更改 <body>

<body><div id="page">Content here</div></body>

CSS 到

html,body{background:#000; height: 100%}
#page{
    background: black url(images/bg.jpg) no-repeat 200px center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    display: none;
}

和 Javascript 到

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

尚未测试,但可以为您工作:)

关于javascript - 带有背景图像的 jQuery 淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16245776/

相关文章:

javascript - 可以根据父 div 的类对渲染图像进行排序吗?

javascript - 获取 div 之外的下一个没有 id 的文本区域

html - 如何将 RGBA 转换为旧版 IE 浏览器的滤镜

javascript - 使用基于服务器变量的javascript更改div的值

javascript - Pascal 三 Angular 形数组未在 HTML 中显示?我该如何解决?

javascript - Google Apps 脚本文件上传(通过 HTML 表单)仅在脚本为 "bound"时有效(测试独立脚本时,HTTP 403 错误)

java - Tomcat 没有在跨域 jquery ajax 调用中接收自定义 header

php - 使用jquery从插入到src标记的html输入字段中获取值

javascript - 使用属性或插槽将数据传递给子元素

javascript - 使用 jquery 从 html 表中选择第二行