Question

我给了身体一个班.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://jsbin.com/ebemez/4/edit

Answer 1

因为你正在交换一个课程，你不能根据我的知识淡化它（你可以循环背景颜色 - 见http://www.made-by-mike.co.uk的标题），但不是图像。

我能想到的最好的解决方案是在文档的根级别嵌套两个绝对定位的div（在你的内容div之前）：

<body>
    <div id="bgone">&nbsp;</div>
    <div id="bgtwo">&nbsp;</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
    })
});

Answer 2

您将无法使用body类上的background image css属性执行此操作。

您需要为第二个背景图像创建一个容器，并为页面内容创建一个容器，将它们放在一起，然后您可以将背景容器淡入淡出，以便图像交叉淡入/取出原始体背景图片。

Answer 3

我认为您正在寻找的是jQueryUI的核心。它是一个名为switchClass的函数（基本上很容易被称为animateClass）。这很棒;促进基于当前和未来类的平滑动画元素（自动神奇地删除/添加这些类）并支持缓和转换，转换时间和回调fxn。希望它有所帮助，我用它来转换我网站上的图库菜单。

jQuery使用淡入淡出效果更改正文的背景URL

3 个答案: