为什么这个 jQuery 动画循环不起作用？答案

【问题标题】：why this jQuery animation loop doesn't work?为什么这个 jQuery 动画循环不起作用？
【发布时间】：2013-08-12 10:13:05
【问题描述】：

<script>
function swim() {

    $("#ship").animate({left: "-=-540px"}, 3000, function() {

        $("#ship").css("-moz-transform", "scaleX(-1)");
        $("#ship").css("-o-transform", "scaleX(-1)");
        $("#ship").css("-webkit-transform", "scaleX(-1)");
        $("#ship").css("transform", "scaleX(-1)");
        $("#ship").css("filter", "FlipH");
        $("#ship").css("-ms-filter", "FlipH");
        $("#ship").animate({left: "-=540px"}, 3000);
        swim();

        })

    }


    swim();

</script>

当我只使用 document.ready 时工作正常，但在尝试将其变为循环后停止。某处一定有语法错误，但我不知道在哪里。

编辑：nvm。就是把脚本放到<head>而不是<body>的情况。

【问题讨论】：

如果function(){} 你可以使用this 代替重复查询。
$("#ship").... 语句末尾缺少分号。我不认为这可能是原因。

标签： javascript jquery loops jquery-animate

【解决方案1】：

它需要文档就绪包装器是有原因的。 “正常”功能不是它的同等替代品。如果在 DOM 准备好之前调用该函数，#ship 选择器不会匹配任何内容，动画不会运行，回调也不会执行。

在文档就绪事件中调用函数：

$( swim );

【讨论】：