Question

我试图通过重复更改document.getElementById("ElementID").style.left的值来点击它，使用JavaScript使元素“振动”。我在一个特定的函数中多次改变它，但不是每次改变它都移动，它只在函数的末尾移动，即我最后一次改变。这是HTML代码：

<html>
  <body>
    <script>
        function changePosition() {
            if (document.getElementById("ElementID").style.left == "50%") {
                document.getElementById("ElementID").style.left = "52%";
            } else {
                document.getElementById("ElementID").style.left = "50%";
            }
        }

        function vibrate() {
            changePosition();
            setTimeout(changePosition, 50);
            setTimeout(changePosition, 50);
            setTimeout(changePosition, 50);
            setTimeout(changePosition, 50);
        }
    </script>
    <button id="ElementID" type="button" style="position:absolute; top:50%; left:50%;" onclick="vibrate()">Vibrate Me</button>
  </body>
</html>

最后我只看到了按钮的位置，但我看不到改变过程中的过渡。我做错了什么？

Answer 1

似乎所有超时都会同时执行。尝试更改为

setTimeout(changePosition,100);
setTimeout(changePosition,200);
setTimeout(changePosition,300);
setTimeout(changePosition,400);

或

for (var i = 1; i < 5; i++) {
   setTimeout(changePosition,100*i);
}

Answer 2

以下是使用setInterval而不是timeout的示例。与数字混淆，你应该能够得到你想要的结果

http://jsbin.com/oSIXayun/4/

Answer 3

HTML：

<button id="ElementID" type="button" style="position:absolute; top:50%; left:50%;">Vibrate Me</button>

JS：

function changePosition() {
    if (document.getElementById("ElementID").style.left=="50%") {
        document.getElementById("ElementID").style.left="52%";
    }
    else {document.getElementById("ElementID").style.left="50%";}
}
function vibrate() {
    changePosition();
    setTimeout(changePosition,50);
    setTimeout(changePosition,100);
    setTimeout(changePosition,150);
    setTimeout(changePosition,200);
}
document.getElementById("ElementID").onclick = vibrate;

：）

Answer 4

setTimeout内的所有vibrate()次来电都是同时进行的。您可以根据所需的振动次数调用changePosition()并使用setTimeout重复该功能来解决此问题。

(function () { 
    var vibrating = 0;

    function changePosition() {
        if (document.getElementById("ElementID").style.left == "50%") {
            document.getElementById("ElementID").style.left = "52%";
        } else {
            document.getElementById("ElementID").style.left = "50%";
        }
        if (vibrating != 0) {
            vibrating--;
            var t = setTimeout(changePosition,50);
        }
    }

    function vibrate() {
        vibrating = 4;
        changePosition();
    }

    document.getElementById('ElementID').onclick = vibrate;
})();

元素在JavaScript函数中只更改了一次

4 个答案: