jquery - jQuery 交叉淡入淡出转换加载

Question

我想要实现的目标很简单。我见过插件这样做，但我不想使用插件。

我在锚点中有两个图像。a#fade1 我要加载，然后显示 3 秒然后淡出。然后 a#fade2 我想在 a#fade1 之后淡入并显示 3 秒，然后在重复该过程时淡出。

但是，当我将 a#fade2 设置为 900 时，它会以 450 毫秒的速度淡入，而其他的淡入淡出。那么任何人都可以帮助我解决这个问题，并解释为什么我刚才提到的不起作用？

这是我的代码。

$('a#fade1, a#fade2').hide();

$('div#fadetransitions').ready(function() {
    $('a#fade1').fadeIn(450).delay(3000).fadeOut(450);
    $('a#fade2').delay(3450).fadeIn(900).delay(3000).fadeOut(450);
    return false;
});

Answer 1

你可以这样做：

$('a#fade1, a#fade2').hide();

function show1() {
    $('a#fade1').fadeIn(450).delay(3000).fadeOut(450, function(){show2();});
}

function show2() {
    $('a#fade2').fadeIn(450).delay(3000).fadeOut(450, function(){show1();});
}


$().ready(function() {
    show1();
});​