Question

        function slideRight() {


            // slide to right
            $("div").animate({
                left: "200px"
            }, 2000, function() {
                slideLeft();
            });
        }

        function slideLeft() {

            // slide to left
            $("div").animate({
                left: "0px"
            }, 2000, function() {
                slideRight();
            });
        }
        $(document).ready(function() {
            $("#start").on("click", function() {
                slideRight();
            });
        });

我有两个div，我想同时来回移动它们。

    <div style="top:100px;"></div>
    <div style="top:300px;"></div>

css代码：

        div {
            background: yellow;
            height: 100px;
            position: absolute;
            width: 100px;
            left:0px;}

但是，每次幻灯片后动画都会卡住并变慢。一个div是好的。 div越多，时间越长。为什么呢？

Answer 1

尝试添加以下内容：

$("div").stop().dequeue().animate({
  ...

Answer 2

我认为问题是，你的函数在另一个具有永无止境循环的动画函数中调用自己，这会导致每次调用延迟。相反，我在第二个功能上停止循环，然后再次启动超时，这会打破循环并延迟并再次启动。的 DEMO

Jquery动画卡住了

2 个答案: