javascript - jQuery 使用淡入/淡出更改 div 背景图像

Question

我正在尝试在我创建的网站上创建淡入/淡出效果(编辑:网站 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 的解决方案。

感谢您的帮助!

Answer 1

这是我发现使背景图像变淡的唯一合理方法。

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

你的CSS；现在增强了 CSS3 transition .

#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 属性，这将不起作用。