jQuery动画不适用于背景图像

我想使用jQuery的动画更改容器的背景图像。我试过了，但不起作用，也没有编译错误：

$("#main-container").animate(
{"background-image": 'url("images/background2.png")'},2000);

我可以用css来做，但是我想要动画效果

$("#main-container").css(
{"background-image": 'url("images/background2.png")'});

---

知道为什么会发生这种情况吗？

jQuery中没有背景图像的动画（我不确定UI），但您可以通过css转换实现这种效果。试着用2秒的时间轻松地进行转换，它应该在元素的每一次更改中应用这种效果（不要忘记交叉浏览器问题）

您还可以设置淡入动画、更改图像，然后设置淡入动画

$("#main-container").animate({opacity: 0}, 1000, function(){
$(this).css({"background-image": 'url("images/background2.png")').animate({opacity:1},{duration:1000})
});

Html:

JQuery：

如需进一步参考，请参阅以下链接

---

您可以使用CSS转换：

CSS:

HTML:

函数背景变化（）{
$（“#bgDiv”）.removeClass（“background1”）.addClass（“background2”）；
};
单击我

我为您创建了一个示例：

---

您不能使用jQuery的图像动画，它就是不起作用

但这是解决问题的方法

---

使用jQuery插件进行颜色操作和动画支持：

---

如果没有这个插件，

backgroundColor

上的jQuery

animate（）

方法将无法工作。

如何设置

#主容器的不透明度的动画？@Digzol这不是我想做的。我可以改变不透明度，它可以工作，但我想改变图像。动画的网址，你会期待什么结果？？？请检查文档以了解jQuery
animate（）
方法的工作原理。请阅读：您正在尝试做jQuery不支持的事情<代码>动画

可用于数值（以及常量

隐藏

和

显示

）。

<div id="main-container"></div>

 #main-container{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

$('#main-container')
    .animate({opacity: 0}, 'slow', function() {
        $(this)
            .css({'background-image': 'url(images/background2.png)'})
            .animate({opacity: 1});
    });

#bgDiv {
    width: 250px; 
    height: 250px;
    /* For Safari 3.1 to 6.0 */
    -webkit-transition-property:background-image;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:0s;
    /* Standard syntax */
    transition-property: background-image;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 0s;
}

.background1 {
    background-image: url("http://lorempixel.com/output/abstract-q-c-250-250-5.jpg");
}

.background2 {
    background-image: url("http://lorempixel.com/output/nature-q-c-250-250-7.jpg");
}

<script>
    function backgroundChange(){
    $("#bgDiv").removeClass("background1").addClass("background2");
    };
</script>
<p onclick="backgroundChange()">Click Me</p>
<div id="bgDiv" class="background1"></div>

setTimeout(animate, 2000);

function animate() {
    $('#main-container').animate({}, 'fast', function () {
        $(this).css({
            'background-image': 'url(http://i.stack.imgur.com/7YKUD.jpg)'
        });
    });
}