Jquery 动画卡住了

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 就可以了。 divs 越多，卡住的时间越长。为什么？

Answer 1

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

Answer 2

尝试添加如下内容：

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

Jquery 动画卡住了

Jquery animate get stuck

html

javascript

css

jquery

jquery-animate