Javascript jQuery使用淡入效果更改正文的背景URL
我给了body一个类Javascript jQuery使用淡入效果更改正文的背景URL,javascript,jquery,css,background,fade,Javascript,Jquery,Css,Background,Fade,我给了body一个类.wrapbgone，我在X秒后将该类切换到.wrapbgtwo 我希望切换显示淡入淡出效果 这是我的CSS： .wrapbgone{background:url('http://placehold.it/500x500/915');height:100%;} .wrapbgtwo{background:url('http://placehold.it/500x500/400');height:1580px;} 下面是一个例子：使用body类的background-imag
.wrapbgone.wrapbgtwo.wrapbgone{background:url('http://placehold.it/500x500/915');height:100%;}
.wrapbgtwo{background:url('http://placehold.it/500x500/400');height:1580px;}
下面是一个例子：使用body类的background-image-css属性将无法做到这一点
您需要为第二个背景图像和页面内容创建一个容器，将它们放置在彼此上方，然后可以淡入淡出背景容器，这样图像将与原始身体背景图像交叉淡入淡出。使用身体类上的background image css属性将无法完成此操作
您需要为第二个背景图像创建一个容器，并为页面内容创建一个容器，将它们放置在彼此上方，然后您可以淡入淡出背景容器，这样图像将与原始正文背景图像交叉淡入淡出。因为您正在交换一个类，据我所知，你不能让它褪色（你可以循环背景色-见标题），但不能让图像褪色 我能想到的最佳解决方案是在文档的根级别（在内容div之前）嵌套两个绝对定位的div：
因为你要交换一个类，就我所知，你不能使它褪色（你可以循环背景色-参见的标题），但不能使图像褪色 我能想到的最佳解决方案是在文档的根级别（在内容div之前）嵌套两个绝对定位的div：
我想你想要的是jQueryUI的核心。它是一个名为switchClass的函数（基本上可以很容易地称为animateClass）。太棒了；促进基于当前和未来类的元素平滑动画（自动删除/添加这些类），并支持缓和过渡、过渡时间和回调fxn。希望它能有所帮助，我用它来转换我网站上的gallery菜单。我想你想要的是jQueryUI的核心。它是一个名为switchClass的函数（基本上可以很容易地称为animateClass）。太棒了；促进基于当前和未来类的元素平滑动画（自动删除/添加这些类），并支持缓和过渡、过渡时间和回调fxn。希望它有帮助，我用它来转换我的网站上我的画廊菜单
<body>
<div id="bgone"> </div>
<div id="bgtwo"> </div>
<div id="content">
...
</div>
</body>
$(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
})
});