FadeIn после ajax jquery

Question

У меня проблема с анимацией (fadeIn). Он не работает после ajax. Существует только NO ANIMATION, но содержимое появляется.

Мой код, как:

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); 

}); 

Эта проблема может быть решена с помощью задержки до замирания, но я думаю, что это должно быть хорошо без этого. Почему это не так?

Answer 1

Возможно, это потому, что JavaScript является языком асинхронного языка. То, что вы experiening является проблемой синхронизации:

Вашего Аякс будет сделан, вы обстреливаете манипуляции DOM (prepend()), и imidiately после стрелять вы делаете fadeIn() но FadeIn завершена, прежде чем ваши данные предваряются, поэтому, вероятно, вы вызываете fadeIn() на элемент, который еще не существует.

Попробуйте это:

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

И читать это, чтобы понять, почему использование тайма-аута-иногда полезно: Why is setTimeout(fn, 0) sometimes useful?

По оборачивать свои действия с setTimeout функции вы, в основном, говоря: «ждать, пока все не будет сделано прежде чем делать это ».

Вот скрипка: jsFiddle

Answer 2

Вы пытались поместить оба вызова в тот же .done() - Block?

Я думаю, что это должно работать:

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

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

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

}); 

В этом случае должно быть гарантировано, что эти две строки кода выполняются последовательно.

Я сделал живой пример здесь: http://jsfiddle.net/xLo93d29/ Для меня это работает.

Answer 3

Вы должны использовать "успех" вместо "сделано":

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"); 

Answer 4

Может быть, вы можете сделать, как этот

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