我给主体一个类 .wrapbgone
,我在 X 秒后将类切换到 .wrapbgtwo
。
我希望切换出现淡入淡出的效果。
这是我的 CSS:
.wrapbgone{background:url('http://placehold.it/500x500/915');height:100%;}
.wrapbgtwo{background:url('http://placehold.it/500x500/400');height:1580px;}
最佳答案
因为你正在交换一个类,据我所知你不能淡化它(你可以循环背景颜色 - 请参阅 http://www.made-by-mike.co.uk 的标题),但不是图像。
我能想到的最佳解决方案是在文档的根级别(在内容 div 之前)嵌套两个绝对定位的 div:
<body>
<div id="bgone"> </div>
<div id="bgtwo"> </div>
<div id="content">
...
</div>
</body>
然后使用 jQuery 使一个淡入另一个:
$(document).ready(function() {
$('#bgtwo').fadeTo(0,0); // or set opacity to 0 in CSS to prevent div appearing then disappearing on page load
$('#bgtwo').fadeTo(500, 1, function(){
$('#bgone').remove(); // replace remove() with fadeTo(500,0) if you don't want to remove it from the page altogether
})
});
关于javascript - jQuery 使用淡入淡出效果更改正文的背景 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8740607/