Javascript jQuery-fadeIn'；慢'；立即出现

我正试图这样做，当你点击一个链接时，它会删除一个div（带有一些段落和文本），并插入另一个div（带有一些段落和文本）。我使用jQuery来淡入淡出这些内容。当您单击链接时，原始div的淡入会起作用，然后我有一个开关盒来确定淡入的内容。但是，设置为“慢速”的fadeIn似乎立即出现

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

编辑：

---

因此，在将fadeTo更改为fadeOut，并将fadeOut中的“slow”更改为“fast”之后，它运行良好，并以我想要的方式过渡。但是，每当我现在单击“home”时，它都会将div移动到“block”位置（它会将div吐到左下角），然后将其推回到容器中心的右侧位置。只有当我点击home，而没有其他sidenav链接时，它才会这样做……这些链接都运行完全相同的代码（home只是交换机中的第一个）。有什么想法吗？

根据我对您的理解，我相信您只需要这样做：

$('#home-content').fadeIn('slow');

（

fadeIn

功能自动将

display

属性设置为inline/block）

此外，虽然您的实现正确，但执行起来更简单：

$('.content').fadeOut('slow');

---

（）

在没有看到HTML的情况下，要理解您试图实现的确切结果有点困难，但这里有一个JSFIDLE，上面是您的代码

---

如果希望在

fadeTo

完成后启动

fadeIn

，则需要使用回调函数。另外，由于您正在淡入0不透明度，只需使用淡出：

$(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;
    });
});

---

您只需将回调添加到淡出，以便在动画完成后执行：

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

    switch(linkClicked) {

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

    });

---

更新了上面的描述，使用淡出和“快速”使转换工作，但现在div在返回内联之前短暂地更改为块定位？

$(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;
    });
});

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

    switch(linkClicked) {

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

    });