jQuery用淡入淡出效果改变身体的背景URL

我给了身体一个类.wrapbgone，我在X秒后将类切换到.wrapbgtwo。jQuery用淡入淡出效果改变身体的背景URL

我希望切换出现淡入淡出效果。

这是我的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

来源

2012-01-05 jQuerybeast

因为您正在交换课程，所以无法褪色到我所知的最佳状态（您可以循环背景颜色 - 请参阅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 
    }) 
});

来源

2012-01-05 10:15:09 MassivePenguin

你将不能够做到这一点使用对身体类的背景图像的CSS属性。

您需要为第二个背景图像和页面内容的容器创建一个容器，将它们放在彼此之上，然后您可以淡入淡出背景容器，以便图像会交叉淡入/淡出原始图像身体背景图像。

来源

2012-01-05 10:10:03 bardiir

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

来源

2012-02-05 08:00:00 Justin

jQuery用淡入淡出效果改变身体的背景URL

回答

相关问题