javascript - 如何通过 AJAX 捕获加载外部 html 的事件

Question

不是全职 javascript 开发人员。我通过 AJAX/JSON 加载一些外部 html 作为字符串，然后将其放入 DOM 中。

json 看起来像这样:

  {
    user_ids:[2,4,7],
    html:"<div class='show-fade-in' >here is text</div>"
   }

我想通过动画效果向用户提供一些反馈，以便他们能够注意到它，而不是让它仅仅出现，这可能会让他们错过它。我想使用与此类似的技术:http://jsfiddle.net/SO_AMK/a9dnW/3/链接至 https://stackoverflow.com/a/11681331/152825 。我的问题是如何捕获加载外部 json 并放入 DOM 的事件，以便我们可以在元素“show-fade-in”中启动动画。

我将通过以下方式添加 html:

所以:

$.get('/arc/external-info',function(){},'json'
).done(function(r){
   $('#item-editing').append(r.html);
    // EDIT #1 this doesn't word
    $( ".show-fade-in" ).fadeIn( "slow", function() {
      alert('fade-in complete');
    });

})

感谢您的帮助

Answer 1

简单的淡入

如果您使用关键帧，则无需知道何时完成。一旦您附加元素，它就会执行动画

div.myAjax{
 -webkit-animation:x 700ms ease;
 opacity:1;
}
@-webkit-keyframes x{
 0%{opacity:0;}
 100%{opacity:1;}
}
 /*add -webkit,-moz,-ms,-o for more support.*/

演示

http://jsfiddle.net/rU9yN/

如果您有任何问题，请询问..如果我误解了您的问题，请告诉我，以便我重新阐述代码。