如果目标是动画按钮，jquery animate 将不起作用

Question

所以我有一个设计，每 X 秒查询一次新数据。为了控制这个，我有 3 个按钮：停止、启动和刷新。 Stop 停止间隔，start 重新启动间隔，而刷新应该停止当前间隔，执行查询，然后重新启动间隔。

我添加了一个很酷的动画，其中刷新按钮有一个背景，显示计时器直到下一个查询。当按下“停止”时，该动画将停止；当按下“开始”时，该动画将从头开始。刷新应该与从添加的查询开始执行相同的操作，但是如果我尝试用鼠标单击它，它不会重置动画并且会出错。如果我使用不同的钩子（如 onBlur）或通过 API 调用 click，它确实可以按我想要的方式工作。

知道是什么导致手动点击扰乱了动画处理吗？

我不知道如何在这里包含 jquery，所以该代码片段还不能工作。如果有人可以编辑它，请删除此行:)

/*
    let table = $("#table").dataTable({
        ...
    });
*/
    function refresh() {
        stop_loop();
        start_loop();
    }
   
    let timer = 5;
    let qInterval = undefined;

    function anim() {
        let $refresh = $("button#refresh");
        $refresh.css("background-position", $refresh.innerWidth());
        $refresh.stop().animate({
                backgroundPositionX:  2 * $refresh.innerWidth() + "px",
            }
            , timer * 1000, "linear");
    }

    function query() {
        try {
            //table.api().ajax.reload();
            anim();
        } catch (ignored) {
            stop();
        }
    }

    function stop_loop() {
        clearInterval(qInterval);
        $("button#refresh").stop().dequeue();
    }

    function stop() {
        stop_loop();
    }

    function start_loop() {
        if (qInterval === undefined) {
            qInterval = setInterval(query, timer * 1000);
            console.log("Started");
        }
        anim();
    }

    start_loop();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="pause" onclick="stop();">
        Stop
    </button>
    <button type="button" id="start"
            onclick="start_loop();">
        Start</i>
    </button>

<button type="button" class="button" id="refresh" onclick="refresh();" style="background: linear-gradient(90deg, white 0, white 25%, #4a55746b 50%, white 50%, white 100%) -100% 0;background-size: 200% 100%;">
    Refresh
</button>

Answer 1

好吧，所以...问题是在实际代码中，我使用了一个具有带有过渡背景的悬停/焦点样式的按钮类。这不知何故弄乱了背景动画。

添加了

transition: none;

按钮修复了问题