如何设置淡出和淡入之间的延迟

我正在写一个4 div的网站。当点击一个链接时，显示div应该淡出，并且新的淡入。问题是他们正在同时这样做，所以淡入的div出现在正在淡出的div的下面淡出完成。我如何让一个在另一个之后发生。这里是我的jQuery：如何设置淡出和淡入之间的延迟

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

有可能是做一个干净的方式，但我是新来的jQuery，是为使这项工作很为自己感到骄傲。

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

大卫

来源

2016-03-15 David Brabson

jQuery.fadeOut为您提供了声明[“complete”回调函数] [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.

来源

2016-03-15 11:22:15 squaleLis

的fadeOut需要0.8秒即可完成。之后你需要你的淡入。

只需使用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) 
});

这应该给你你想要的。

来源

2016-03-15 11:13:23

对不起，在发布之后，我发现了.delay（time）函数。忘记我问了。

来源

2016-03-15 11:18:58

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

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

     elementToFadeIn.fadeIn(3000); 
    }); 
}

这将为你的代码提供模块性。

来源

2016-03-15 11:22:09 Araknid

如何设置淡出和淡入之间的延迟

回答

相关问题