jQuery fadeIn '慢' 立即出现

我试图做到这一点，以便当您单击链接时，它会删除一个 div （带有一些段落和文本）并插入另一个 div （带有一些段落和一些文本）。我正在使用 jQuery 来淡入和淡出它们。当您单击链接时，原始 div 会淡出，然后我有一个 switch case 来确定淡入的内容。但是，设置为“慢”的 fadeIn 似乎会立即发生。

这是相关的代码（其余只是其他情况）：

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('fast');

    switch(linkClicked) {

        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;

Edit:

因此，在将 fadeTo 更改为 fadeOut，并将 fadeOut 中的“慢”更改为“快”之后，它运行良好并按照我想要的方式过渡。但是，现在每当我单击“home”时，它都会将 div 移动到“块”位置（它将其吐到左下角），然后将其推回容器中心的正确位置。仅当我单击主页且没有其他侧导航链接时，它才会执行此操作...它们都运行完全相同的代码（主页只是开关盒中的第一个链接）。有任何想法吗？

如果你想要fadeIn后开始fadeTo完成后，您将需要使用回调函数。另外，由于您的不透明度正在淡入 0，因此只需使用fadeOut:

$(document).ready(function() {
$('.nav-link').click(function() {
    var linkClicked = $(this).attr("id");
    $('.content').fadeOut('slow', function() {

    // this code will begin once fadeTo has finished
    switch(linkClicked) {
        case 'home': 
            console.log("linkClicked = "+linkClicked);
            $('#home-content').fadeIn('slow', function() {
                $(this).css("display", "inline");
                $(this).css("opacity", 100);
                });
            break;
    });
});