jQuery淡入'慢'立刻出现

Question

我试图让它成为当你点击链接时,它删除一个div(带有一些段落和文本)并插入另一个div(带有一些段落和一些文本).我正在使用jQuery淡入淡出.当您单击链接时,原始div的淡出工作,然后我有一个开关案例来确定什么被淡入.然而,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;

编辑:

因此,在将fadeTo更改为fadeOut并将fadeOut中的"slow"更改为"fast"之后,它运行良好并按照我想要的方式进行转换.但是,每当我点击"home"时,它会将div移动到"block"位置(它将它吐到左下角),然后将自己推回到容器中心的正确位置.它只在我单击home而没有其他sidenav链接时执行此操作...这些都运行完全相同的代码(home只是交换机情况下的第一个).有任何想法吗？

Answer 1

根据我对你想要做什么的理解，我相信你只需要这样做：

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

（fadeIn函数自动设置display属性为inline/block）

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

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

（简化的 jsFiddle）