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

Demonstration

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

用Jquery淡化图像

3 个答案: