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

将它们放入complete animate的回调中。 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()

Answer 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;
    }
});

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

2 个答案: