Question

我正在研究一个jQuery函数，我试图用它来循环淡入淡出不同的背景图像。出于某种原因，它只是从默认背景图像更改为第二个（contact_banner），然后再次返回到相同的背景图像。

我们非常感谢任何帮助，我确信它很简单，但我似乎无法解决这个问题。

$(document).ready(function () {

function slider(){

    $('#cover').delay(3000).fadeOut(1000);
    $('#cover').css("background-image", "url('images/classes-cover.jpg')");
    $('#cover').fadeIn(1000);

    $('#cover').delay(3000).fadeOut(1000);
    $('#cover').css("background-image", "url('images/contact_banner.png')");
    $('#cover').fadeIn(1000, slider);
}   
slider();
});

Answer 1

jQuery fade是异步的。完成第一个事件后，使用回调来触发下一个事件。

$('#cover').fadeIn(1000, function() { $('#cover').fadeIn(1000, ... ); });

看看我为你准备的这个小提琴http://jsfiddle.net/xu7sbofv/。

要理解的重要一点是函数不会阻塞fadeIn（）或delay（），因为调用是异步的。这就是您必须提供回调函数的原因。

Answer 2

管理以找到解决方案，这也是一个更简洁的实现：

var imgSrcs =[
    "images/class-banner/running-group_banner2.png",
    "images/class-banner/running-group_banner3.png",
    "images/class-banner/running-group_banner1.png",
];

$('#cover').delay(1000).fadeIn(1000, animateBackground());

function animateBackground() {

    window.setTimeout(function(){

        var url = imgSrcs[imgSrcs.push(imgSrcs.shift()) - 1];

        $('#cover').delay(4000).fadeOut(1000, function(){

            $(this).css("background-image", "url(" + url + ")")

        }).fadeIn(1000, animateBackground())

    });
}

jQuery循环通过背景图像

2 个答案: