如何设置回调以运行 before jquery 动画？

Posted 2023-05-07

技术标签:

【中文标题】如何设置回调以运行 *before* jquery 动画？【英文标题】：How can I set up a callback to run *before* a jquery animation? 【发布时间】：2010-09-20 09:00:11 【问题描述】：

我正在尝试设置一个循环，其中动画运行一定次数，并且在动画的每次迭代之前运行一个函数。不过，时间最终会关闭——它运行回调 n 次，然后运行动画 n 次。例如：

for (var i=0;i<3;i++) 
  console.log(i);
  $('#blerg').animate(top:'+=50px',75,'linear', function()log('animated'));

输出

0
1
2
animated
animated
animated

在我切换到 jquery 之前，我遇到了 scriptaculous 的这个问题，并发现了一个“beforeSetup”动画回调。有 jquery 等价物吗？

【问题讨论】：

【参考方案1】：

动画是异步的。所以循环运行得非常快，开始三个动画并输出 1、2 和 3。一段时间后，动画完成并输出动画 x 3。这可以解释你的输出。

一些递归怎么样？

do_animation(max_runs, total_runs) 
   log();
   if (total_runs < max_runs) 
       $(foo).animate(..., do_animation(max_runs, ++total_runs));

do_animation(3, 0);

试一试，告诉我它是如何运行的。

【讨论】：

【参考方案2】：

您也可以尝试使用队列功能。

http://docs.jquery.com/Effects/queue#callback

我记得 animate 在内部使用相同的执行队列，所以理论上应该可以工作（未经测试）。

/* Safe Namespace + Onload : I do this everywhere */
jQuery(function($) 
 /* Calling this once instead of many times will save 
    a lot of wasted calls to document.getElementById + processing garbage 
  */
 var blerg = $('#blerg');
 var addStep = function( i )
 
     blerg.queue(function() 
        console.log(i);
        $(this).dequeue();
     ); 
     blerg.animate(top:'+=50px',75,'linear'); 
     /* In theory, this works like the callback does */
     blerg.queue(function()
       log('animated');
       $(this).dequeue();
     );
 ;

 for (var i=0;i<3;i++) 
 
  /* I call a function here, because that way you don't need to worry 
     about the fact 'i' will reference the last value of 'i' when the code 
     gets around to executing. */
    addStep(i); 
 
);