4

私は ajax アニメーションを試しています。初めてのコンテンツは animate 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;
   }
});
4

2 に答える 2

2

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()

于 2013-05-11T08:04:05.027 に答える
0

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;
    }
});
于 2013-05-11T08:03:48.870 に答える