如何循环 jQuery div 动画？

Posted 2023-05-08

【中文标题】如何循环 jQuery div 动画？

【英文标题】：How to loop a jQuery div animation?

【发布时间】：2012-11-02 06:04:51

【问题描述】：

我正在尝试实现一个带有无限循环的 jQuery 函数来为 div 设置动画。我不知道该怎么做。这是我的代码：

$(document).ready(function () 
    $('#divers').animate(
        'margin-top': '90px'
    , 6000).animate(
        'margin-top': '40px'
    , 6000);
);

【问题讨论】：

完成！感谢大家的时间和耐心。

【参考方案1】：

将执行完整动画的代码放入一个函数中，然后将该函数作为回调参数传递给最后一个动画。比如……

$(document).ready(function()    
    function animateDivers() 
        $('#divers').animate(
            'margin-top':'90px'
            ,6000
        )
        .animate(
            'margin-top':'40px'
            ,6000
            ,animateDivers //callback the function, to restart animation cycle
        ); 
    

    animateDivers(); //call, to start the animation
); 

【讨论】：

嘿，谢谢。但是你能告诉我如果我想移动使用画布放置的图像怎么办？

【参考方案2】：

$(document).ready(function() 
    function ani() 
        $('#divers').animate(
               'margin-top':'90px'
            ,6000).animate(
               'margin-top':'40px'
           ,6000, ani); //call the function again in the callback
        ); 
    ); 
    ani();
); 

【参考方案3】：

使用.animate() 回调来“调用”您的函数：

jsBin demo

$(function() 
  
  
  function loop()
   $('#divers')
     .animate(marginTop:90,6000)
     .animate(marginTop:40,6000, loop); // callback
  
  
  loop(); // call this wherever you want


); 

【讨论】：

运行完美！！感谢您抽出宝贵的时间并进行了精彩的演示。必须赞赏

【参考方案4】：

使用 setInterval 是可行的方法。太多的递归只会让你“堆栈溢出”:-) “未捕获的 RangeError：超出最大调用堆栈大小”

【参考方案5】：

animate() 函数可以选择在动画结束时调用一个函数。你可以做同样的电话，瞧。

【讨论】：

现在我明白了，我只需要查看代码即可了解如何操作。非常感谢

【参考方案6】：

还可以设置设置间隔函数，指定在什么时间间隔调用哪个方法

$(function ()  setInterval(fnName, 6000); );