javascript - ajax动画后，动画显示，但内容不显示

Question

我正在尝试ajax动画，第一次内容是动画margin-left：200px，但是动画后另一个内容没有加载，任何人都可以帮助我。

这是我的代码

$.ajax({
   url:url,
   beforeSend: function(){
       $('.slide_loader').show();
   },
   success:function(content){
      $('#right_content').animate({                 
            'margin-left' : '200px'
        }, 500);

      $('#right_content').html(content);
      $('.slide_loader').hide();

      return false;
   }
});

Answer 1

Place them in the complete callback for animate. Animate is asynch so your $('#right_content').html(content) would have got executed before the animate is complete. So use the callback for complete to specify your after animation actions.

 success:function(content){
      $('#right_content').animate({                 
            'margin-left' : '200px'
        }, 500,function(){
      $('#right_content').html(content);
      $('.slide_loader').hide();

     });
     return false;
   }

Ref .animate()

Answer 2

One thing to be aware of, which might be the source of the unexpected behavior, is that $.animate is asynchronous. That is, the animation won't be done when $('#right_content').html(content); is run. The last argument of animate lets you specify a callback function that will run when the animation is done.

ie.

$.ajax({
    url:url,
    beforeSend: function(){
        $('.slide_loader').show();
    },
    success:function(content){
        $('#right_content').animate({                   
            'margin-left' : '200px'
        }, 500, function() {
          $('#right_content').html(content);
          $('.slide_loader').hide();
        });
    return false;
    }
});