jQuery如何使用fadeIn/Out改变div的背景图片？

Question

jQuery如何使用fadeIn/Out改变div的背景图片？

13

我正在尝试在我创建的网站上实现淡入淡出效果（编辑：删除网站URL）。

除了当你点击颜色板中的颜色时，它会直接替换图像而没有任何效果，其他都很好。

这是我编写的小脚本，触发器是在单击颜色之一上。

function changeImage(newColor) {

    //var previousImage = $('#image-holder').css("background-image");

    $('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");
};

我尝试使用$('#image-holder').fadeOut(1500)然后再使用$('#image-holder').fadeIn(1500)，但是它的效果很奇怪...图片会双重淡化。

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')").fadeOut(function(){$(this).fadeIn()});

我想要实现的是，点击颜色框时，当前背景图会渐隐，同时新的背景图会淡入。

我知道如果使用两个 <img src="" /> 并切换它们的显示/隐藏状态会更容易实现，但不幸的是我不能修改 HTML 太多，所以我在寻找基于 jQuery 的解决方案。

感谢您的帮助！

- Lior Iluz

6个回答

11

对我有效的解决方案：

var image = $('#image-holder');
    image.fadeOut(1000, function () {
        image.css("background", "url('images/design-" + newColor + ".jpg')");
        image.fadeIn(1000);
    });

- Lior Iluz

5

抱歉打扰，但这会使整个容器淡入淡出，而不仅仅是背景图片。在大多数情况下，这是不可取的。 - Alex

4

var currentBackground = 0;

var backgrounds = [];

backgrounds[0] = 'images/BasePic1.jpg';

backgrounds[1] = 'images/BasePic2.jpg';

backgrounds[2] = 'images/BasePic3.jpg';

backgrounds[3] = 'images/BasePic4.jpg';

backgrounds[4] = 'images/BasePic5.jpg';

function changeBackground() {

    currentBackground++;

    if(currentBackground > 4) currentBackground = 0;

    $('#image-holder').fadeOut(1500,function() {
        $('#image-holder').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('#image-holder').fadeIn(1500);
    });


    setTimeout(changeBackground, 5000);
}

$(document).ready(function() {

    setTimeout(changeBackground, 5000);  

});

- nidhin nidhi

1

这个代码可以实现淡出效果，但是会将包含在父元素中的所有子元素一起淡出。请问是否有可能只淡出父元素中的背景图片？ - Omar Abdirahman

2

大多数解决方案只会淡入元素，而不是背景。这意味着在背景加载时隐藏了您的信息，这往往不是您想要的。

我编写了以下解决方案，它通过将您的背景图像添加为元素的图像来工作。当它加载完成时，它会淡入，同时保持子元素可见。

它还添加了一个预加载gif，当它加载完成时会消失。您可能需要使用更大的图像进行测试以查看其效果。

代码和fiddle/snippet如下。

jQuery(document).ready(function() {

  jQuery('.Loader').each(function(index, el) {

    var sBG = jQuery(this).css('background-image');
    sBG = sBG.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');

    jQuery(this).prepend('<img src="' + sBG + '" id="tmp_' + jQuery(this).attr('id') + '" class="BGImage" />');
    jQuery(this).css('background-image', 'url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif")');

    jQuery(".BGImage:not(.processed)").each(function() {
      this.onload = function() {

        var oElement = jQuery('#' + jQuery(this).attr('id').replace('tmp_', ''));
        jQuery('#' + jQuery(oElement).attr('id')).css('background-image', 'none');
        oElement.removeClass('Loader');
        jQuery(this).fadeIn(3000);

      }
    });
  });

});

.Loader {

  background-position: center;

  background-repeat: no-repeat;

  transition: background 0.5s linear;

}

.BGImage {

  position: absolute;

  z-index: -1;

  display: none;

}

#Test {

  height: 300px;

  background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTMa7lFP0VdTl63KgPAOotSies-YQ3qSslOuXWE6FnFxJ_EfF7tsA);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Test" class="Loader">Some text</div>

- Benjo

1

是的，我也做了同样的事情。这是可行的，并且跨浏览器兼容。 - Erutan409

0

为什么不使用jQuery来注入所需的标记呢？

var $image_holder = $('#imageHolder'),
    $carousel_container = $('<div/>').attr('id', 'carousel_container'),
    images = ['first.jpg', 'second.jpg', 'third.jpg'];

for ( var i=0; i<images.length; i++ )
{
    $('<img/>').attr('src', images[i]).appendTo($carousel_container);
}

$carousel_container.insertAfter($image_holder);
$image_holder.hide();

- Seth

-3

你可以尝试这样做：

将

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");

替换为

$('#image-holder').animate({background : url('images/design-' + newColor + '.jpg') }, 3000);

根据需要调整3000以增加动画时间。

完全未经测试

- Jason Gennaro

看起来可能是一个解决方案，但它甚至不会改变图像...也许语法有误？我会调查一下。 - Lior Iluz

如果您将图像通过函数参数changeImage(newColor)传递，它应该会更改图像。 - Jason Gennaro

我已经测试了alert，它得到了正确的颜色，但是图像不会改变。尝试调整语法，但没有效果。 - Lior Iluz

@JasonGennaro：{background : url('images/design-' + newColor + '.jpg') } 将会执行 url(...) 函数!!! - billy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mulan · Accepted Answer

这是我找到的唯一合理的方法，可以淡化背景图片。

<div id="foo">
  <!-- some content here -->
</div>

您的CSS现在更加强大，使用了CSS3转换效果。

#foo {
  background-image: url('a.jpg');
  transition: background 1s linear;
}

现在更换背景

$("#foo").css("background-image", "url(b.jpg)");

或者使用本地JavaScript完成

document.querySelector("#foo").style.backgroundImage = "url(b.jpg)";

瞧，它褪色了！

明显的免责声明：如果您的浏览器不支持CSS3的transition属性，则此方法无效。