Question

使用以下代码，一切都按顺序在Firebug控制台中正常显示，并按顺序显示条目（包括数据的Ajax帖子），但所有jQuery效果/动画（fadeIn，{{1} }}，animate，slideUp，slideDown，animate）在调用Ajax函数后一次发生，而不是在执行实际步骤时。

为什么这样做？我该如何解决？

fadeOut

这里是ajaxPutSurveyItems

$('#overlay').fadeIn(500, function () { 
  $('#overlaybox').animate({ 'top': '40px' }, 100);
});
$('#survey').slideUp(1500);

console.log('-after overlay show');
console.log('before ajaxPutSurveyItems()');

ajaxPutSurveyItems(save, after);

console.log('after ajaxPutSurveyItems()');

$('#survey').slideDown(1500);
$('#overlaybox').animate({ 'top': '-200px' }, 300, function () {
  $('#overlay').fadeOut(2500); 
});

console.log('-after overlay hide');

Answer 1

如前所述，在开始另一个动画之前，你不会等到一个动画完成。您刚刚将它们设置为实际上同时启动。虽然你已经使用了一些回调，但我相信你了解它们是如何工作的，只需要投入更多。

因此需要callbacks：

 $('#overlay').fadeIn(500, function () { 
   $('#overlaybox').animate({ 'top': '40px' }, 100);
 });
 $('#survey').slideUp(1500, function(){

      console.log('-after overlay show');
      console.log('before ajaxPutSurveyItems()');

      ajaxPutSurveyItems(save, after);

      console.log('after ajaxPutSurveyItems()');

      $('#survey').slideDown(1500, function(){

            $('#overlaybox').animate({ 'top': '-200px' }, 300, function () {
              $('#overlay').fadeOut(2500); 
            });     
      });

      console.log('-after overlay hide');
 });

jQuery效果/动画在执行中被延迟

1 个答案: