Question

我正在写一个有4个div的网站。当点击链接时，显示div应该淡出，新的淡入淡出。问题是他们同时这样做，所以渐弱的div出现在淡出的div之下。淡出完成。如何让一个发生在另一个之后。这是我的jquery：

function fadeAll() {
	$("#homediv").fadeOut(800);
	$("#affiliatediv").fadeOut(800);
	$("#merchantdiv").fadeOut(800);
	$("#aboutusdiv").fadeOut(800);
	$("#contactusdiv").fadeOut(800);
}
$(".affiliatelink").click(function() {
	fadeAll();
	$("#affiliatediv").fadeIn(3000);
})
$(".homelink").click(function() {
	fadeAll();
	$("#homediv").fadeIn(3000);
})
$(".merchantlink").click(function() {
	fadeAll();
	$("#merchantdiv").fadeIn(3000);
})
$(".aboutlink").click(function() {
	fadeAll();
	$("#aboutusdiv").fadeIn(3000);
})
$(".contactlink").click(function() {
	fadeAll();
	$("#contactusdiv").fadeIn(3000);
})

可能有一种更清洁的方法，但我是jquery的新手，并为自己的工作感到自豪。

感谢您的帮助。我知道有类似的问题，但我找不到任何似乎有帮助的问题。我确实看了。

大卫

Answer 1

fadeOut需要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)
});

这可以给你你想要的东西。

Answer 2

抱歉，发布后我找到了.delay（时间）功能。忘了我问。

Answer 3

根据定义，

fadeOut可以接受在fadeOut动画完成后执行的函数。你可以修改你的fadeAll看起来像这样：

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

        elementToFadeIn.fadeIn(3000);
    });
}

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

Answer 4

jQuery.fadeOut为您提供了声明[＆＃34;完成＆＃34;回调函数] [1]。

您需要以下内容：

function fadeAll(callback) {
    var $allDivs = $("#homediv, #affiliatediv, #merchantdiv, #aboutusdiv, #contactusdiv");
    $allDivs.fadeOut( 800, "swing", callback);
}

$(".affiliatelink").click(function() {
    fadeAll(function(){
        $("#affiliatediv").fadeIn(3000);
    });
});

//etc.

如何在fadeout和fadein之间设置延迟

4 个答案: