javascript - 为什么我的 fadeOut() 方法不起作用？

Question

在我的代码片段中，fadeOut() 方法似乎不起作用，并且立即加载第二个图像。我想在第一张图像的动画完成后淡出第一张图像。请提出您的宝贵意见。

var i = 0;
var images = ['images/bg1.jpg', 'images/bg2.jpg'];
var image = $('#bg');
setInterval(function() {
    image.animate({
        width: "2000px",
        top: "-90px",
        right: "-45px"
    },

    10000,
            function() {
                $('#bg').fadeOut(5000);
                image.css('background-image', 'url(' + images[i++] + ')');
                image.css("width", "1900px");
                image.css("top", "0px");
                image.css("right", "0px");
            });
    if (i == images.length) {
        i = 0;
    }

}, 1000);

提前致谢。

Answer 1

这是完整的解决方案:

    image.fadeOut(5000, function() {
        image.css({'background-image': 'url(' + images[i++] + ')', width:1900, top:0, right:0});
        if (i==images.length) i=0;
    })

编辑:改用不透明度，这样就不会丢失内容的高度:

image.animate({opacity:0}, 5000, function() {
            image.css({'background-image': 'url(' + images[i++] + ')', width:1900, top:0, right:0, opacity:1});
            if (i==images.length) i=0;
        })