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);
    }());
});

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

有关立即调用的函数表达式的更多信息，请参阅Ben "Cowboy" Alman's blog。

Answer 2

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

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

   runIt();
});

jQuery动画循环

2 个答案: