Question

我写了这个jQuery代码，但是当我试图在动画元素返回其原始位置（使用回调函数）时停止它，它没有响应，但它变慢了！。我使用的是jquery-1.6.4版本

<script type="text/javascript">

    $(function () {
        $("#right").click(function () {
            $(".theDiv0").animate({ left: "800px" }, 2000, "swing", returnToLeft);
            $(".theDiv1").animate({ left: "800px" }, 2000, "linear", returnToLeft);
        });
        function returnToLeft() {
            $(".theDiv0").animate({ left: "10px" }, 2000, "swing");
            $(".theDiv1").animate({ left: "10px" }, 2000, "linear");
        }

        $("#stop").click(function () {
            $(".theDiv0,.theDiv1").stop();
           });
    });
</script>

任何建议/解决方案??

Answer 1

尝试使用.stop(true)

有关更多信息，请参阅docs。如果我是对的，这应该会停止动画。

Answer 2

如果单击right两次，我将只看到所描述的问题，这将排队多个animate。您可以通过在每个动画之前调用stop来解决此问题，以防其他动画正在进行中：

    $("#right").click(function () {
        $(".theDiv0").stop().animate({ left: "800px" }, 2000, "swing", returnToLeft);
        $(".theDiv1").stop().animate({ left: "800px" }, 2000, "linear", returnToLeft);
    });
    function returnToLeft() {
        $(".theDiv0").stop().animate({ left: "10px" }, 2000, "swing");
        $(".theDiv1").stop().animate({ left: "10px" }, 2000, "linear");
    }

或者仅使用.is(":animated")

启动动画（如果还没有进行动画）

正如您现在所看到的那样，点击stop后点击right时，动画应停止。

为什么stop（）函数不能正常工作？

2 个答案: