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

Answer 2

使用 -

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

代替，

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

简而言之，您不是在等待淡出动画完成。

修改

在像这样分配图像之前进行索引检查 -

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

Answer 3

您必须在完成fadeOut后调用您的代码，如下所示：

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

fadeOut API document

为什么我的fadeOut（）方法不起作用？

3 个答案: