Ajax jquery之后的FadeIn

Question

I have a problem with an animation (fadeIn). It doesn't work after ajax. There is just NO ANIMATION but the content appears.

My code is like:

function ajax(varia) {

    return $.ajax({

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

    });

}

Function with ajax works fine...

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

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

}).done(function () {

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

});

This problem can be resolved with using delay before the fade, but i think it should be fine without this. Why it's not?

Answer 1

Did you try to put both calls into the same .done()-Block?

I think this should work:

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

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

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

});

In this case it should be guaranteed that the two lines of code are executed successively.

I've made an live example here: http://jsfiddle.net/xLo93d29/ For me it works.