jQuery延迟/暂停动画

jQuery delay/pause an animation

本文关键字：动画 暂停 延迟 jQuery      更新时间：2023-11-05

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

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

现在我有下面的事件在听滚动条位置

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

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

我知道有延迟和清除队列。但呼叫：

$('.myTable').delay(5000) or $('.myTable').clearQueue似乎对有任何影响

可能在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>
相关文章：