javascript - 如何向下移动标题？

Question

我一直在尝试让标题在 200 x 200 像素的正方形中移动，但我的代码无法正常工作。我打算使用 topOffset 和 setInterval 方法来移动标题，但我不明白 topOffset 是如何工作的。到目前为止，我的代码仅将标题向右移动 200 像素:

var leftOffset = 0;

        var moveRight = function () {
            $("#heading").offset({left:leftOffset});

            leftOffset++;

            if (leftOffset > 200) {
                leftOffset = 200;
            }
        };

        setInterval(moveRight, 4);

        var offsetTop = 0;
        var moveDown = function () {
            $("#heading").offset({down:offsetTop});

            offsetTop--;

            if(offsetTop < 200) {
                offsetTop = 200;
            }
        };

        setInterval(moveDown,4);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1 id = "heading">Hello World!</h1>

Answer 1

对于这样的动画，最好使用 CSS，而不是 JS。对于初学者来说，由于 CSS 是硬件加速的，它的性能要好得多。即使有人在浏览器中禁用了 JS，它的实现也更加简单并且可以工作。

在您的情况下，您可以使用关键帧动画来设置元素在每个阶段的位置。尝试下面的例子。请注意，我使用 150px 而不是 200px，只是为了在代码片段中更容易看到效果。您可以轻松地将 top 和 left 值更改为您需要的任何值。

@keyframes square {
  0% { top: 0; left: 0; }
  25% { top: 0; left: 150px; }
  50% { top: 150px; left: 150px; }
  75% { top: 150px; left: 0; }
  100% { top: 0; left: 0; }
}

h1 {
  position: absolute;
  animation-iteration-count: infinite;
  animation-duration: 3s;
  animation-name: square;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1 id="heading">Hello World!</h1>