After ajax animation, animation shows but content is not displayed

Question

I'm trying to use ajax animation, the first content is to animate margin-left: 200px, but after the animation, the other content does not load, someone helps me.

This is my code.

$.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

Put them in the complete animate for animate . The animation is asynchronous, so your $('#right_content').html(content) must be done before the animation finishes. Therefore, use callback to complete to indicate your actions after the animation.

  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 can be a source of unexpected behavior, is that $.animate is asynchronous. That is, the animation will not be executed when $('#right_content').html(content); . The final animate argument allows animate to specify the callback function that will be executed when the animation is executed.

t

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