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

我正在尝试在我创建的网站上创建淡入淡出效果（编辑：网站url已删除）

一切都很好，除了当你点击调色板中的一种颜色时，它会毫无效果地替换图像

这是我写的小脚本，点击其中一种颜色就会触发

function changeImage(newColor) {

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

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

我试着玩

$（“#图像支架”）.fadeOut（1500）

，然后玩

$（“#图像支架”）.fadeIn（1500）

，但它的行为很有趣。。。它会使图像双重淡入淡出

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

我想实现的是，点击一个颜色框，当前的背景图像将淡出，而新的背景图像将淡入

我知道，如果我使用两个

并切换它们的显示/可见性，那么实现这一点会更容易，但不幸的是，我无法对HTML进行如此大的更改，因此我正在寻找基于jQuery的解决方案

---

谢谢你的帮助

为什么不使用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();

var$image_holder=$（“#imageHolder”），
$carousel_container=$（''）.attr（'id'，'carousel_container'），
images=['first.jpg'，'second.jpg'，'third.jpg']；
对于（var i=0；i您可能想尝试类似的方法

替换

$（'#image holder'）.css（“背景”，“url（'images/design-“+newColor+”.jpg'）”）；

与

$（'#图像持有者'）。动画（{background:url（'images/design-'+newColor+'.jpg'）}，3000）；

根据需要调整
3000
，以增加动画中的时间量

完全未经测试
适合我的解决方案：

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

这是我发现的唯一使背景图像褪色的合理方法

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

现在换掉背景

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

或者使用本机javascript来实现

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

瞧，它消失了


明显的免责声明：如果您的浏览器不支持CSS3
transition
属性，则此功能将无法正常工作。
大多数解决方案只是在元素中淡出，而不是在背景中淡出。这意味着在加载背景时，您的信息将被隐藏，这通常不是您想要的

我已经编写了以下解决方案，它的工作原理是获取背景图像并将其作为图像添加到元素中，然后在加载后淡入，同时始终保持子元素可见

它还添加了一个加载时消失的预加载gif。您可能需要使用更大的图像进行测试才能看到它的作用

下面的代码和提琴/片段


jQuery（文档）.ready（函数（）{
jQuery（'.Loader'）。每个函数（索引，el）{
var sBG=jQuery（this）.css（'background-image'）；
sBG=sBG.replace（'url（'，''）。replace（'），''）。replace（'，''）。replace（'，''）；
jQuery（this）.prepend（“”）；
jQuery（this）.css（'background-image'，'url（'http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif")');
jQuery（“.BGImage:未（.processed）”）。每个（函数（）{
this.onload=函数（）{
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{
背景位置：中心；
背景重复：无重复；
过渡：背景0.5s线性；
}
.BGImage{
位置：绝对位置；
z指数：-1；
显示：无；
}
#试验{
高度：300px；
背景图片：url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTMa7lFP0VdTl63KgPAOotSies-YQ3qSslOuXWE6FnFxJ_EfF7tsA）；
}

一些文本
似乎是一个可能的解决方案，但它甚至不会更改图像…可能语法错误？我会查看一下。如果您通过函数参数
changeImage（newColor）传递图像，它应该会更改图像
.I..tested with alert..It获得正确的颜色，但图像不会更改..尝试使用语法，但没有任何更改。@JasonGennaro:
{background:url（'images/design-'+newColor+'.jpg'）}
将执行函数
url（…）
！！最佳答案：）如果只需要添加一行css:dn，那么为什么要使用jquery呢？我想说，这不是一个很好的答案，因为这只适用于Chrome、Safari和Opera。Firefox33和IE11还不支持这一点。不幸的是，背景图像转换不是CSS3动画的一部分，所以可能需要一段时间。@Trevor，背景动画显然是CSS3的一部分。我还认为，在旧浏览器中支持多余的效果是一件愚蠢的事情。很明显，这是CSS3的一部分，怎么会呢？根据W3C-正如您所见，属性列表中不包括背景图像，这可能解释了IE和不支持它的原因。这是一个令人沮丧但却是真的。@naomik有点晚了，但它仍然像一个符咒一样起作用，非常感谢。很抱歉让它复活了，但这会使整个容器淡入淡出，而不仅仅是背景图像。这在大多数情况下是不可取的。这可以工作，但会淡出所有内容，包括内容的子元素。是否有可能淡出父元素上唯一的背景图像？是的，做了同样的事情。这是可行的和跨浏览器兼容的。
$("#foo").css("background-image", "url(b.jpg)");

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