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

标签 javascript jquery css background fade

我给主体一个类 .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

最佳答案

因为你正在交换一个类,据我所知你不能淡化它(你可以循环背景颜色 - 请参阅 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
    })
});

关于javascript - jQuery 使用淡入淡出效果更改正文的背景 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8740607/

相关文章:

javascript - 当使用 Knockout 绑定(bind)排序或加载数据时,数据表偶尔挂起(表中没有可用数据)

javascript - 当指定为对象属性时,IIFE 如何影响其中的此关键字

javascript - React-Redux:开 Jest 未能测试异步操作(始终通过)

javascript - 如何在不使用 Canvas 的情况下使用 HTML5 制作旋转字和旋转线?

jquery - Play 框架和 javascript i18n

html - 调整图像大小以适应具有最大宽度集的 div

javascript - Node JS Jasmine 使用 jasmine.any() 测试多种类型

javascript - 在asp.net的每个页面上注入(inject)javascript

html - 未知高度的 CSS 固定标题

css - 仅当 Webfont 不支持字符时才使用 font-weight bold