Jquery动画卡住了答案

【问题标题】：Jquery animate get stuckJquery动画卡住了
【发布时间】：2017-10-07 19:41:09
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案1】：

尝试添加类似的内容：

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

【讨论】：

【解决方案2】：

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

【讨论】：