使用Jquery在图像中淡入淡出

我使用这段代码是为了在我的网站上淡入淡出背景图像

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

但当我尝试时：

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

---

FadeIn效应不会触发，你知道为什么吗？我希望背景图像淡入而不是淡出。

如果要淡入，需要先隐藏图像：

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

---

首先，必须使用

显示：无与
不透明度相反：0。

为了能够淡出一些东西。
也许，承诺完成

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

从
fadeIn
的回调调用
fadeIn
没有多大意义。当
fadeIn
完成时，元素已经可见，不能再次淡入。在这里，您不是淡入背景，而是淡入整个图像支架。那是你的意图吗？我好像没注意到。哪里使用了
opacity
？在css中，打开css标签，默认设置为：opacity:0；试试这个#图像保持器{opacity:0；}或者你也可以使用display:nonehy代替opacity，谢谢你的反馈。这真的很有帮助，也是我们一直在寻找的。