Question

此代码应该（慢慢地）将带有x="4"的svg框移动到x="400"。我使用了一个带有js的简单循环，并使用jquery设置它。

一旦网站加载，该框应该开始向下移动，但它似乎卡在一个地方。

 

$(function() {
    var i;
    var down = setInterval(function() {
        move_down()
    }, 250);

    function move_down() {
        for (i = 4, i < 400, i++) {
            $("#block_green").attr({
                y: i
            });
        }
    }
});

    body {
    margin: 0;
    overflow: hidden;
}

svg {
    background-color: black;
    width: 100vw;
    height: 100vh;
}

#block_green {
    fill: black;
    stroke: #00ff00;
    stroke-width: .5px;
}

 <!doctype html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
    <svg>
        <rect x="4" y="4" width="80" height="60" id="block_green" />
    </svg>
</body>

</html>

Answer 1

你只需要改变i的递增方式（不需要for循环，因为set interval在这里循环。）另外，你的for循环语句中有逗号，这只是没有引起你的要运行的代码（JS使用分号）。

＆＃13;

$(function() {
  var i = 4;
  var down = setInterval(move_down, 250);

  function move_down() {
    $("#block_green").attr({
      y: i
    });
    i++
  }
});

＆＃13;

body {
  margin: 0;
  overflow: hidden;
}
svg {
  background-color: black;
  width: 100vw;
  height: 100vh;
}
#block_green {
  fill: black;
  stroke: #00ff00;
  stroke-width: .5px;
}

＆＃13;

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <svg>
    <rect x="4" y="4" width="80" height="60" id="block_green" />
  </svg>
</body>

</html>

＆＃13;

减少循环

1 个答案: