Question

我试图让这个功能在不重置的情况下可重复。例如，当我按下具有此功能的按钮时，按钮将从0px向右移动到100px。当我再次按下按钮时，它将从100px变为200px，依此类推。它也应该是动画，因此它一次移动1px直到循环结束。

以下代码仅作为一次性使用，因为它将从0px移动到100px并再次按下它使其变为0px到100px。

我一直在研究这个问题几个小时，并在询问之前查看了许多帮助来源。

function goRight() {
     var pos = 0;
     var count = pos;
     var elem = document.getElementById("main");
     var id = setInterval(move, 5);
     function move() {
          if(pos == count + 100){elem.style.left = pos + 'px'; clearInterval(id);}
          else {pos++; elem.style.left = pos + 'px';}
     }
}

Answer 1

function goRight() {
    var elem = document.getElementById("main");                  // the element
    var origin = parseInt(elem.style.left) || 0;                 // get the left of the element (as an origin for the animation), 0 if not set yet
    var pos = 0;                                                 // pos initialized to 0

    var id = setInterval(move, 5);
    function move() {                                           
        if(pos == 101) { clearInterval(id); }                   // if pos is 101, then stop the animation
        else { pos++; elem.style.left = (origin + pos) + 'px';} // if not, then increment it and set the left of the element to pos + origin
    }
}

Answer 2

我认为你必须只将pos作为全局变量并在goRight函数之外启动它

像这样：

var pos = 0;
function goRight() {
    var count = pos;
    var elem = document.getElementById("main");
    var id = setInterval(move, 5);
    function move() {
        if(pos == count + 100){elem.style.left = pos + 'px'; clearInterval(id);}
        else {pos++; elem.style.left = pos + 'px';}
    }
}

你的代码中的错误只是每当你调用goRight时pos将被设置为零，并且它将从开始时开始。

但是使用全局变量将保存下一个时间间隔将运行。

使Javascript动画继续而不重置

2 个答案: