jQuery延迟/暂停动画答案

【问题标题】：jQuery delay/pause an animationjQuery延迟/暂停动画
【发布时间】：2012-07-16 17:07:07
【问题描述】：

我有以下代码来滚动表格的滚动条

$('.myTable').animate({
    scrollTop: myPositon
}, 45000, function() {

});

现在我有以下事件监听滚动条位置

$('.myTable').bind('scroll', function() {
   //if the scroll bar reaches certain position
   //pause the scrolling for 5 seconds

 });

我有代码来检查滚动条是否到达某个位置，问题是如何在绑定函数中暂停滚动/或动画 5 秒，然后自动恢复动画？

我知道有延迟和 clearQueue。但调用：

$('.myTable').delay(5000) or $('.myTable').clearQueue 似乎确实有任何作用

【问题讨论】：

您想让表格不可滚动吗？只需使用溢出删除滚动条：隐藏
你能在 jsfiddle 或 jsbin 中提供一个测试用例吗？
与其暂停和恢复动画，不如只为第一步制作动画，暂停 5 秒，然后为下一步制作新动画？还有一个step 选项，您可以为动画指定在动画期间进行回调
谢谢 MrOBrian。这就是我最终做的。感谢您的提示！
您需要使用 setInterval 和 clearInterval 方法。

标签： javascript jquery

【解决方案1】：

可能下面的html解决你的问题

<html>
    <head>
        <style>
            div {
                position: absolute;
                background-color: #abc;
                left: 0px;
                top:30px;
                width: 60px;
                height: 60px;
                margin: 5px;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>

    <body>
        <button id="go">Go</button>
        <button id="stop">STOP!</button>
        <button id="back">Back</button>
        <div class="block"></div>
        <script>
            /* Start animation */
            $("#go").click(function () {
                $(".block").animate({
                    left: '+=100px'
                }, 2000);
            });

            /* Stop animation when button is clicked */
            $("#stop").click(function () {
                $(".block").stop();
                setTimeout(function () {
                    $(".block").animate({
                        left: '+=100px'
                    }, 2000)
                }, 1000);
            });

            /* Start animation in the opposite direction */
            $("#back").click(function () {
                $(".block").animate({
                    left: '-=100px'
                }, 2000);
            });
        </script>
    </body>
</html>

【讨论】：