FadeIn after ajax jquery

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?

Alex · Answer 1 · 2014-12-28T15:01:58.993

0

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.

edited Dec 28 '14 at 15:01

answered Dec 28 '14 at 14:42

Alex

744
8
20

I added a working example. Maybe you can compare it with your implementation. Then let me know if it works ;). – Alex Dec 28 '14 at 15:03

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Thats probably because JavaScript is an asynchroneus language. What you are experiening is a synchronization issue:

Your ajax is done, you are firing DOM manipulation (prepend()), and imidiately after you fire it you do the fadeIn() but the fadeIn is complete before your data is prepended, so probably you'are calling fadeIn() on an element that doesn't exist yet.

Try this:

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

And read this to understand why using timeout 0 is sometimes helpful: Why is setTimeout(fn, 0) sometimes useful?

By wrapping your action with setTimeout function you are basically telling: "wait until everything is done before doing this".

Here's the fiddle: jsFiddle

Sorry, made a small mistake, fixed it. Should be working now as it is. — bwitkowicz, Dec 28 '14 at 14:58

acontell · Answer 3 · 2014-12-28T15:11:51.313

0

You should use "success" instead of "done":

function ajax(varia) {

  $.ajax({

    dataType: "html",
    async: false,
    type: 'POST',
    url: 'index.php?fn=' + varia,
    data: { token: "mytoken" },
    success: function(data) {
      $("body").prepend(data);
      // The #login have atribute style="display: none;"
      $("#login").fadeIn(500); 
    }

   });

}
ajax("login", "html");

edited Dec 28 '14 at 15:11

answered Dec 28 '14 at 14:49

acontell

6,792
1
19
32

Ajax returns a $.Deferred object, which has no method `success`, has `done()` instead. Success is a callback function inside ajax, but since he's returning it as an object he should be using `.done()`. Look here: http://api.jquery.com/jquery.deferred/ – bwitkowicz Dec 28 '14 at 15:01
@bwitkowicz you're absolutely right. Thank you for pointing me in the right direction. I've updated the answer to eliminate the mistake. – acontell Dec 28 '14 at 15:12
1

Good, than I'm removing my downvote from your answer :) – bwitkowicz Dec 28 '14 at 15:19

score 0 · Answer 4 · answered Dec 28 '14 at 16:40

0

May be you can do like this

.done(function (data) {
    var $data = $(data).hide();
    $data.prependTo($("body"));
    $data.fadeIn(500);
});

answered Dec 28 '14 at 16:40

Prashant Kumar

386
2
9

FadeIn after ajax jquery

4 Answers4