jQuery动画循环

我有动画循环的问题。 有一个对象我想以一种特殊的方式移动并在循环中进行。 是否有任何原生选项可以制作它？ 我有这个：

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

但它似乎并不那么漂亮。

Answer 1

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

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

Answer 2

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

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

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

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

您也可以通过创建自己的插件来使用自定义队列，以更高级的方式完成此操作。 当我在动画队列中鬼混时，我不久前创造了一个小小提琴 。

关于立即调用的函数表达式的更多信息可以在Ben“Cowboy”Alman的博客上阅读 。