jQuery动画循环

Question

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

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

但它似乎并不那么漂亮.

Answer 1

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

• 在局部变量中存储对所选元素的引用以加快执行(减少对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的博客上阅读.

Answer 2

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

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

   runIt();
});