Jquery 如何在淡出和淡出之间设置延迟

我正在写一个有4个div的站点。单击链接时，显示的div将淡出，新的div将淡入。问题是他们同时在做这件事，所以淡入的div显示在淡出的div下面，直到淡出完成。我如何让一个接一个发生。以下是我的jquery：

函数fadeAll（）{
$（#homediv”）。淡出（800）；
美元（“#附属iv”）。淡出（800）；
美元（800美元）；
美元（“#aboutusdiv”）。淡出（800）；
美元（“#联系USDIV”）。淡出（800）；
}
$（“.affiliatelink”）。单击（函数（）{
法德尔（）；
美元（“#附属iv”）。fadeIn（3000）；
})
$（“.homelink”）。单击（函数（）{
法德尔（）；
$（“#homediv”）.fadeIn（3000）；
})
$（“.merchantlink”）。单击（函数（）{
法德尔（）；
美元（3000美元）；
})
$（“.aboutlink”）。单击（函数（）{
法德尔（）；
$（“#aboutusdiv”）.fadeIn（3000）；
})
$（“.contactlink”）。单击（函数（）{
法德尔（）；
美元（“#contactusdiv”）。fadeIn（3000）；
})

淡出需要0.8秒才能完成。你需要你的fadeIn在那之后开始

只需使用setTimeout函数

$(".contactlink").click(function() {
    fadeAll(); // All will start simultaneously and take 0.8s
    setTimeout(function(){

       $("#contactusdiv").fadeIn(3000);
     }, 800);  // After 0.8s, execute the function. (which contains the fadeIn call)
});

---

这会给你你想要的。

对不起，在发布这篇文章之后，我找到了.delay（time）函数。忘记我的问题。

根据定义，淡出可以接受淡出动画完成后执行的功能。您可以修改fadeAll，使其看起来像这样：

function fadeAll(elementToFadeIn) {
    $("#homediv #affiliatediv #merchantdiv #aboutusdiv contactusdiv").fadeOut(800, function() {

        elementToFadeIn.fadeIn(3000);
    });
}

---

这将为您的代码提供模块化功能。

你需要像这样的东西：

函数fadeAll（回调）{
var$allDivs=$（“#homediv，#附属iv，#merchantdiv，#aboutsdiv，#contactusdiv”）；
$allDivs.fadeOut（800，“摆动”，回调）；
}
$（“.affiliatelink”）。单击（函数（）{
法德尔（函数（）{
美元（“#附属iv”）。fadeIn（3000）；
});
});
//等等。