jQuery动画循环答案

【问题标题】：jQuery animate loopjQuery动画循环
【发布时间】：2011-06-14 13:49:54
【问题描述】：

我对动画循环有疑问。有一个对象我想以一种特殊的方式移动并循环执行。是否有任何本地选项可以做到这一点？我有这个：

$(function () {
    function runIt() {
        $('#div').show("slow");
        $('#div').animate({"marginLeft":"300px"},8000);
        $('#div').animate({"marginLeft":"0px"},8000);
        $('#div').hide("slow", runIt);
    }
    runIt();
});

不过好像没那么好看。

【问题讨论】：

对我来说看起来不错。 kingjiv 对缩进的回答使它看起来更好。
kingjiv 的解决方案看起来很可能是候选方案，我唯一要补充的是考虑动画函数中允许的“onComplete”函数。查看 jQuery Api Docs 了解更多信息！
我在我的old fiddle 的回答中添加了一个链接，我在其中使用了一个小插件和自定义队列。希望能帮助到你！ :)

标签： javascript jquery animation

【解决方案1】：

这是对动画进行排队的正确方法。但是，可以对您的代码进行一些改进，使其更简洁、更漂亮：

将所选元素的引用存储在局部变量中以加快执行速度（减少对 DOM 的查询）
通过删除对象属性的不必要引号来清理它
默认情况下，大小以像素为单位，因此我们可以使用纯整数来代替
命名函数可以替换为立即调用的匿名函数，然后使用arguments.callee作为回调

以下是展示上述更改的示例：

$(function () {
    var element = $("#div");
    (function(){
        element
            .show("slow")
            .animate({ marginLeft: 300 }, 1000)
            .animate({ marginLeft: 0 },   1000)
            .hide("slow", arguments.callee);
    }());
});

您还可以通过创建自己的插件来使用自定义队列以更高级的方式完成此操作。不久前我在玩动画队列时创建了一个small fiddle。

更多关于立即调用的函数表达式可以在Ben "Cowboy" Alman's blog阅读。

【讨论】：

在更一般的情况下，可以调用 arguments.callee();作为单独的一行

【解决方案2】：

我就是这样做的。我会提出的唯一建议是使用链接以获得更好的代码，因此不会每次都创建 jquery 对象。

$(function () {
   function runIt() {
      $('#div').show("slow")
               .animate({"marginLeft":"300px"},8000)
               .animate({"marginLeft":"0px"},8000)
               .hide("slow", runIt);
   }

   runIt();
});

【讨论】：

感谢您的建议。但是有没有其他方法可以在不使用回调黑客的情况下做同样的事情更漂亮？
太棒了！我们有同样的想法；）
这不是 hack，在我看来这是最好的方法。动画完成后，您再次启动它。我能想到的唯一其他方法是 setTimeout 或 setInterval，但这更难看。你必须弄清楚你的动画运行了多长时间并将超时设置为......丑陋的。
谢谢，我想知道的。我想可能是 jquery 有一些特殊的循环动画，但这个选项对我很有用。
@AlexFord 不会。这不是真正的递归。对runIt 的调用完成。对runIt 的下一次调用被调用为对hide 的回调，此时第一个runIt 完成并退出堆栈。