Question

我遇到动画问题（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); 

});

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

Answer 1

您是否尝试将两个调用放入相同的.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 2

这可能是因为JavaScript是一种异步语言。您正在经历的是同步问题：

你的ajax已经完成，你正在触发DOM操作（prepend()），并且在你触发它之后你做了fadeIn()，但是在你的数据被预先添加之前fadeIn已经完成，所以可能你＆＃ 39;在一个尚不存在的元素上调用fadeIn()。

试试这个：

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

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

通过使用setTimeout函数包装您的操作，您基本上是在告诉：＆＃34;等到所有操作都完成后再执行此操作＆＃34;。

这里是小提琴：jsFiddle

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

在ajax jquery之后淡出

4 个答案: