jquery - 使用 Jquery 淡入图像

Question

我正在使用此代码来淡入和淡出我网站上的背景图像。

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 效果不触发，任何想法为什么？我希望背景图像淡入而不是淡出。

Answer 1

如果您希望图像淡入，则需要最初隐藏图像：

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 ?
});

示范

Answer 2

首先，您必须使用display:none;而不是opacity:0.

为了能够淡入某物。

Answer 3

也许，承诺完成，

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