Question

所以我目前在Jquery中有这个问题 fadeOut功能似乎不起作用。

我的代码：

function laadpagina(pagepath, menuid) {
    $('#paginainhoud').fadeOut();
    wait(1000);
    $("#pagecontent").load(pagepath, function(responseText, textStatus, req) {
        if (textStatus == "error") {
            $("#pagecontent").load("/paginas/home.php?404");
        }
    });
    actievemenu.classList.remove("active");
    actievemenu = document.getElementById(menuid);
    actievemenu.classList.add("active");
}

它确实加载了新的Path，但没有淡出另一个类。哦，是的，我确实使用<div id="paginainhoud"></div>而不是<div class="paginainhoud"></div>

我尝试淡出的div是使用Jquery Load函数加载的，这可能是一个问题吗？哦，检查器工具不会显示任何类型的错误。

Answer 1

一个问题可能是您使用的Jquery的精简版不包含fadeOut（）函数。 Link to Jquery CDN选择未压缩/缩小的版本。例如，如果您使用来自getbootstrap.com的链接，则它们将使用苗条版本。您还可以检查Chrome控制台（f12），看看是否从fadeOut（）函数收到错误消息。

Answer 2

wait(1000);

您尚未提供代码，但我将假设它运行了一系列昂贵的计算，以尝试伪造JavaScript中的睡眠函数。

由于您需要操作单个事件循环，因此当JavaScript引擎为fadeOut制作动画时，这会使JavaScript引擎保持忙碌状态。

当等待循环结束时，JS检查动画应该在什么位置，发现已经过去了足够的时间使其完全 out 并因为它错过了点而直接捕捉到动画应该有部分褪色点的地方。

如果要延迟代码，请将其放入函数中并将其传递给setTimeout。

$('#paginainhoud').fadeOut();
setTimeout(function () {

    $("#pagecontent").load(pagepath, function(responseText, textStatus, req) {
        if (textStatus == "error") {
            $("#pagecontent").load("/paginas/home.php?404");
        }
    });
    actievemenu.classList.remove("active");
    actievemenu = document.getElementById(menuid);
    actievemenu.classList.add("active");
}, 1000);

更好的是，如果您只想等待动画完成，请利用jQuery内置的回调功能。

$('#paginainhoud').fadeOut({ 
    complete: function () {
        $("#pagecontent").load(pagepath, function(responseText, textStatus, req) {
            if (textStatus == "error") {
                $("#pagecontent").load("/paginas/home.php?404");
            }
        });
        actievemenu.classList.remove("active");
        actievemenu = document.getElementById(menuid);
        actievemenu.classList.add("active");
    }
});

jQuery淡出不适用于Jquery加载的内容？

2 个答案: