Я выполняю небольшую задачу по кодированию jQuery, пытаясь заставить круг перемещаться по странице в квадрате. Я попытался сделать это кучей разных способов на данный момент. Хотел бы я показать вам все разные способы, которые я пробовал, но на этом этапе было бы слишком много работы. Вместо этого см. Ниже для моей последней попытки:
<body>
<div id="small-circle"></div>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script type="text/javascript">
function moveCircle () {
$("#small-circle").offset({left: 200, top:0});
$("#small-circle").offset({left: 0, top:200});
$("#small-circle").offset({left: -200, top:0});
$("#small-circle").offset({left: 0, top:-200});
}
setInterval(moveCircle, 3000);
</script>
Что я понял, поиграв с этим, так это то, что указанные мной смещенные движения в итоге сводят друг друга на нет, а вместо этого круг вообще не двигается. если я использую только один метод .offset (), круг перемещается в указанном мной направлении. Если я добавлю больше, то, похоже, вычислит линию на основе заданных мною движений, а затем двинется вдоль этой линии. Поэтому я думаю, что, поскольку указанные движения в сумме составляют ноль (200 + 0 + 0 + 200 - 200 + 0 + 0 -200 = 0), круг вообще не движется. Надеюсь, все это имеет смысл. Как я могу заставить круг двигаться в идеальном квадрате, 200px вправо, затем 200px вниз, 200px влево и затем 200px обратно?
Большое спасибо за помощь новичку с очень маленьким мозгом!