淡入/淡出没有白色背景的背景图像 [英] Fade In / Fade Out background images without white background

问题描述

我想创建一个网站的背景图片随着时间的变化随着淡入/淡出效果，但我不想使用现有的jQuery淡入/淡出效果，因为当一个图像淡出时，白色背景出现在其他图像褪色之前。我发现一个名为 Maximage 的插件适合我的请求，但它使用img标签，而我想使用background-image CSS（我有一个很好的理由这样做）。

I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?

这是我的HTML代码：

Here's my HTML code:

<div id="wrapper">
//My contain here
</div>

以下是我的JavaScript代码：

Here's my JavaScript code so far:

//Auto change Background Image over time
$(window).load(function() {
   var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
    var i = 0;

    function changeBackground() {
        $('#wrapper').fadeOut(500, function(){
            $('#wrapper').css('background-image', function () {
            if (i >= images.length) {
                    i = 0;
                }

                return 'url(' + images[i++] + ')';
            });
            $('#wrapper').fadeIn(500);
        })      
    }
    changeBackground();
    setInterval(changeBackground, 3000);
});

示例： http://www.aaronvanderzwan.com/maximage/examples/basic.html

推荐答案

AHH！最后！我发现了一个不错的技术！我使用双重包装。

AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.

您的代码中的问题是有点逻辑。您不能同时fadeOut和fadeIn 一个包装器。

The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.

所以想法是创建两个包装并在它们之间来回切换。我们有一个包装器叫做wrapper_top，它封装了名为wrapper_bottom的第二个包装器。而魔法是放在旁边的第二个包装：你的内容。

So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.

因此结构准备就绪如下：

Thus having the structure ready which is the following:

<div id='wrapper_top'>
    <div id='content'>YOUR CONTENT</div>
    <div id='wrapper_bottom'></div>
</div>

然后JS + CSS和voilà！

Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!

这里是实现： http://jsbin.com/wisofeqetu/1/

这篇关于淡入/淡出没有白色背景的背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！