ajax动画后，动画显示，但内容不显示答案

【问题标题】：After ajax animation, animation show, but content is not showajax动画后，动画显示，但内容不显示
【发布时间】：2013-05-11 16:04:05
【问题描述】：

我正在尝试 ajax 动画，第一次内容是动画边距左：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;
   }
});

【问题讨论】：

标签： javascript ajax

【解决方案1】：

将它们放在animate 的complete 回调中。 Animate 是异步的，因此您的 $('#right_content').html(content) 会在动画完成之前执行。所以使用完成的回调来指定你的动画之后的动作。

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

     });
     return false;
   }

Ref .animate()

【讨论】：

您需要进行的另一项检查是您按原样获取content，并且控制台中没有记录其他错误。

【解决方案2】：

有一点需要注意，这可能是意外行为的根源，$.animate 是异步的。也就是说，当$('#right_content').html(content); 运行时，动画不会完成。 animate 的最后一个参数允许您指定一个回调函数，该函数将在动画完成时运行。

即。

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

【讨论】：