如何設置淡出和淡入之間的延遲

我正在寫一個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

如何設置淡出和淡入之間的延遲

回答

相關問題