Ajax jquery之后的FadeIn


                    

我对动画(fadeIn)有问题。 在ajax之后不起作用。 没有动画,但是内容出现。 </ p>

我的代码如下:</ p>

  function ajax(varia){

     返回$ .ajax({

         dataType:“ html”,
         异步:错误,
         输入:“ POST”,
         网址:“ index.php?fn =” +变化率,
         数据:{令牌:“ mytoken”}

     });

}
</ code> </ pre>

使用ajax的功能可以正常工作... </ p>

  ajax(“ login”)。done(函数(数据){

     $(“ body”)。prepend(data);

})。done(function(){

     // #login具有属性style =“ display:none;”
     $(“#login”)。fadeIn(500);

});
</ code> </ pre>

此问题可以通过使用淡入淡出之前的延迟来解决,但我认为没有这个问题应该没问题。 为什么不是呢?</ p>
     </ div>

展开原文

原文

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?

4个回答


那可能是因为JavaScript是一种异步语言。 您遇到的是同步问题:</ p>

您的ajax完成后,您正在触发DOM操作( prepend()</ code>),并且在您执行后,立即执行了 fadeIn()</ code>,但fadeIn已完成 在添加数据之前,您可能正在对尚不存在的元素调用 fadeIn()</ code>。</ p>

尝试一下:</ p>

  ajax(“ login”)。done(函数(数据){
     $(“ body”)。prepend(data);
     setTimeout(function(){
         $(“#login”)。fadeIn(500);
     },0);
});
</ code> </ pre>

并阅读以下内容以了解为什么有时使用超时0有时会有所帮助:为什么setTimeout( fn,0)有时有用吗? </ p>

通过使用 setTimeout </ code>函数包装动作,您基本上会说:“等到一切完成后再做”。 </ p>

这是小提琴: jsFiddle </ p>
     </ div>

展开原文

原文

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


您是否尝试将两个呼叫都放在同一个.done()-Block中?</ p>

我认为这应该可行:</ p>

  ajax(“ login”,“ html”)。done(函数(数据){

     $(“ body”)。prepend(data);

     // #login具有属性style =“ display:none;”
     $(“#login”)。fadeIn(500);

});
</ code> </ pre>

在这种情况下,应确保执行两行代码
</ p>

我在这里做了一个在线示例: http://jsfiddle.net/xLo93d29/
对我来说有效。</ p>
     </ div>

展开原文

原文

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.


您应该使用“成功”而不是“完成”:</ p>

  function ajax(varia){

   $ .ajax({

     dataType:“ html”,
     异步:错误,
     输入:“ POST”,
     网址:“ index.php?fn =” +变化率,
     数据:{令牌:“ mytoken”},
     成功:功能(数据){
       $(“ body”)。prepend(data);
       // #login具有属性style =“ display:none;”
       $(“#login”)。fadeIn(500);
     }

    });

}
ajax(“ login”,“ html”);
</ code> </ pre>
     </ div>

展开原文

原文

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


也许你可以这样做</ p>

  .done(函数(数据){
     var $ data = $(data).hide();
     $ data.prependTo($(“ body”));
     $ data.fadeIn(500);
});
</ code> </ pre>
     </ div>

展开原文

原文

May be you can do like this

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐