javascript - Ajax jquery之后的FadeIn

我对动画（fadeIn）有问题。在ajax之后不起作用。没有动画，但是内容出现。

我的代码是这样的：

function ajax(varia) {

    return $.ajax({

        dataType: "html",
        async: false,
        type: 'POST',
        url: 'index.php?fn=' + varia,
        data: { token: "mytoken" }

    });

}

使用ajax的功能可以正常工作...

ajax("login").done(function (data) {

    $("body").prepend(data);

}).done(function () {

    // The #login have atribute style="display: none;"
    $("#login").fadeIn(500);

});

这个问题可以通过使用淡入淡出之前的延迟来解决，但是我认为没有这个就可以了。为什么不是呢？

最佳答案

那可能是因为JavaScript是一种异步语言。您正在体验的是一个同步问题：

您的ajax完成后，您将触发DOM操作（prepend()），并且在触发后会模仿您的操作fadeIn()，但是在数据被添加之前，fadeIn已完成，因此您可能会在尚不存在的元素。

尝试这个：

ajax("login").done(function (data) {
    $("body").prepend(data);
    setTimeout(function(){
        $("#login").fadeIn(500);
    },0);
});

并阅读以下内容以了解为什么有时使用超时0会有所帮助：Why is setTimeout(fn, 0) sometimes useful?

通过用fadeIn()函数包装动作，您基本上可以说：“等到一切完成后再做”。

这是小提琴：jsFiddle

关于javascript - Ajax jquery之后的FadeIn，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27677351/