Question

//this code animates the divs to the left after every 5 secs
$(document).ready(function() {

    var refreshId = setInterval(function() {
        $('.box').each(function() {
            if ($(this).offset().left < 0) {
                $(this).css("left", "150%");
            } else if ($(this).offset().left > $('#container').width()) {
                $(this).animate({
                    left: '50%'
                }, 500);
            } else {
                $(this).animate({
                    left: '-150%'
                }, 500);
            }
        });
    }, 5000);)
};

在上面的代码中，每当页面加载时，div元素每5秒钟就会滑动一次。但是我的网页上有一个按钮，当点击时，根据点击的按钮分别向左或向右移动div个元素。但问题是在buuton点击时有时会重叠的自动动画和动画。因此，每当我点击按钮时，我想再次将document.ready中的自动动画延迟5秒。

这显示在jsFiddle中。当您继续单击“左侧动画”或“右侧动画”按钮时，div有时会重叠。所以我只想在点击按钮时延迟自动动画。

Answer 1

您可以致电clearInterval(refreshId)，然后重新运行代码以设置轮换。

这是一个如何做到这一点的草图。我担心我可能无法提供比这更详细的信息，但我希望它有所帮助！

$(document).ready(function () {
    var refreshId;
    function startRotation() {
        refreshId = setInterval(function () { /* rotate stuff */ }, 5000);
    }
    function restartRotation() {
        clearInterval(refreshId);
        startRotation();
    }
    startRotation();

    var button = /* find the buttons that should restart the rotation */;
    button.click(restartRotation);
};

在javascript或jquery中延迟就绪函数（）

1 个答案: