Question

我正在尝试为背景图像设置动画，我想知道在此功能中添加暂停功能的最佳做法是什么？

function scrollBg(){
    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

    //Set the CSS of the header.
    $('#campaignid').css("background-position","0 "+current+"px");
}

//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);

Answer 1

您可以使用clearInterval(init)来停止动画，然后记住某个变量中的当前步骤，并在setInterval需要时从此步骤开始动画。或者，您可以使用另一个全局变量（类似于当前），它将指示您是否可以执行scrollBg的主体，例如：

function scrollBg(){
    if(isPause){
      return;
    }
    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

//Set the CSS of the header.
$('#campaignid').css("background-position","0 "+current+"px");

}

您可以通过设置isPause = true

来设置暂停

Answer 2

如何在特定的当前值（即clearInterval（init））中使用clearInterval，并在另一时间重置间隔？

如何在javascript中暂停我的动画

2 个答案: