Question

我正在尝试解决这个问题：

JQUERY - Changing Div Dimension , from top left/right or bottom left/right

创建我自己的调整大小动画功能。

我尝试了递归解决方案，但问题仍然存在，它立即执行，我根本看不到任何动画

function RelativeCornerResizer(Elements , StartSize , EndSize , Unit , Left , Top)
{   
    //var I = StartSize ;
    var SSpx = "" , LeftPx="" , TopPx="";

    LeftPx = (Left)+Unit; 
    TopPx = (Top)+Unit;


    if(StartSize < EndSize)
    {       
            StartSize+=2;

            SSpx = StartSize+Unit;

            if(Left!=0) LeftPx = (Left-StartSize)+Unit;
            if(Top!=0)  TopPx = (Top-StartSize)+Unit;

            $(Elements).css({'width': SSpx,'height': SSpx});
            $(Elements).css({'left' : LeftPx , 'top' : TopPx});

            setTimeout(RelativeCornerResizer(Elements , StartSize , EndSize , Unit , Left , Top),50);
    }

}

Answer 1

您可以在另一个超时函数中使用setTimeout来继续循环。举个例子：

function timeoutLoopFunction() {
  ... do animation stuff here for one frame ...

  // Now queue up the same update again for another
  // update if the animation is not finished yet
  if (shouldHaveAnotherFrame) {
    // Change the hardcoded 50 to a variable one that changes
    // over time if necessary.
    setTimeout(timeoutLoopFunction, 50);
  }
}

// Start the animation by calling the function.
timeoutLoopFunction();

Answer 2

setTimeout(RelativeCornerResizer(Elements , …),50);

这不符合您的预期。

setTimeout要求字符串或函数引用作为第一个参数。

但是你没有在这里传递引用，你是调用函数RelativeCornerResizer，以便它立即执行，只返回它的返回值（什么都没有）被传递给setTimeout ......因此，一切都在“立刻”发生。

您可以使用匿名函数来绕过此问题：

setTimeout(
  function() {
    RelativeCornerResizer(Elements, …);
  },
  50
);

在没有setInterval的情况下更改周期的时间

2 个答案: