jQuery使用fadeIn/Out更改div背景图像

Question

我正在尝试在我创建的网站上创建淡入/淡出效果(编辑:网站网址已删除)

一切都很好,除非你点击调色板中的一种颜色,它取代图像没有任何效果.

这是我写的小脚本,它是在其中一种颜色上触发的.

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的解决方案.

感谢帮助!

Answer 1

这是我发现淡化背景图像的唯一合理的事情.

<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)";

Voilà,它消失了!

明显的免责声明:如果您的浏览器不支持CSS3 transition属性,这将无效.

Answer 2

对我有用的解决方案:

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