使用 jQuery 加载时淡入页面背景图像
[英]Fade in page background image on load with jQuery
问题描述
I want to fade in a CSS page background image with jQuery when my page loads.
我想在我的页面加载时使用 jQuery 淡入 CSS 页面背景图像。 I know it is possible to set a CSS page background image with jQuery and it is also possible to fade in text when a page loads but I am not sure how to do both.我知道可以使用 jQuery 设置 CSS 页面背景图像，并且在页面加载时也可以淡入文本，但我不知道如何做到这两点。
You can set a CSS background image in jQuery by doing:您可以通过执行以下操作在 jQuery 中设置 CSS 背景图像：
showBackground($("body").css({"background-image":"url(yourimage.jpg)"}));
You can fade in text by doing:您可以通过执行以下操作淡入文本：
$(document).ready(function(){
$('#fade').hide();
$('#fade').append('This text should fade in.');
$('#fade').fadeIn();
});
1 个解决方案
解决方案1
1 已采纳 2011-07-09 21:11:50
You can load the body background image on page load but to fade it you need to use some other manipulation like putting a div with 100% height-width to hold background image.您可以在页面加载时加载正文背景图像，但要使其淡化，您需要使用其他一些操作，例如放置一个 100% 高宽的div来保存背景图像。 I have tried following and it fades in both text and background (in div).我试过跟随，它在文本和背景中都消失了（在 div 中）。
<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
</head>
<body>
<div id="b" style="display:none;left:0;top:0;margin:0;padding:0;width:100%
!important; height:100% !important;
background-image:url('DSC00667.jpg');z-index:-1000;">
</div>
<div style="top:0;left:0;position:absolute;">
<div id="d" style="height:200px;width:500px;margin:0 auto;top:0;
clear:none;z-index:100;">
this is text div that will fade in.
</div>
<div style="clear:both;height:1px !important;"> </div>
</div>
<script type="text/javascript">
$(function(){
$("#b").fadeIn();
$('#d').hide().append('This text should fade in.').fadeIn();
});
</script>
</body>
</html>
fewer style elements may also work but I have not tested.更少的样式元素也可以工作，但我没有测试过。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.