Проблема с перемещением заголовка с помощью jquery

Это не HW, а вызов из книги по кодированию, которую я использую, чтобы попытаться изучить Javascript.

Задача состоит в том, чтобы сделать заголовок переместить 200 px влево, затем 200 px вниз, 200px влево, а затем 200px вверх. Я пробовал несколько способов, но я получаю ошибки или он прыгает или я не могу получить его, чтобы уменьшить. Я изложил в общих чертах то, что я знаю, что мне нужно сделать здесь (что просто приводит его по диагонали). Я ценю любую помощь!

Спасибо,

Даниил

<!DOCTYPE html>
<html>
<head>
  <title>Interactive programming</title>
</head>
<body>
  <h1 id="heading">Hello world!</h1>
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  <script>
    var leftOffset = 0;
    var moveDown=0
    var moveHeading = function () {
      if(leftOffset<=200){
        $("#heading").offset({ left: leftOffset });
        leftOffset++;
      }
    };

    var moveHeadingDown= function (){
      if(moveDown<=200 ){
        $("#heading").offset({ top: moveDown });
        moveDown++;
       }
     };

    var moveHeadingLeft= function (){
      if (leftOffset===200){
        $("#heading").offset({ left: leftOffset });
        leftOffset--;
      }
    };
    var moveHeadingUp= function (){
      if (moveDown===200){
        $("#heading").offset({ top: moveDown });
        moveDown--;
      }
    }

    setInterval(moveHeading, 30);
    setInterval(moveHeadingDown, 30);
    setInterval(moveHeadingLeft, 30);
    setInterval(moveHeadingUp, 30);

  </script>
</body>
</html>

2 ответа

  1. Было бы проще использовать функцию jQuery animate ().

    Образец:

    leftValue = -200; // pixels
    bottomValue = -200; // pixels
    timeAnim = 1000; // seconds
    typeAnim = 'swing';
    
    $("#heading").animate({
      left: leftValue
    }, timeAnim, typeAnim,
    
      function() {
        $("#heading").animate({
          bottom: bottomValue
        }, timeAnim, typeAnim,
    
        function() {
          // Next function
        });
      });
    
  2.  var offleft=0;
     var offtop=0;
    
    function position() {
       $('#heading').css('margin-top',offtop+'px');
       $('#heading').css('margin-left',offleft+'px');
    }
    $(function() {
      $({i:0}).animate({i:1},{
       duration: 300,
       easing: 'linear',
       step: function(now) {
          if(now<=0.25) {
             offleft = now*4*200;
          }
          else if(now<=0.5) {
             offtop = (now-0.25)*4*200;
          }
          else if(now<=0.75) {
             offleft = (now*-1+0.75)*4*200;
          }
          else {
             offtop = (now*-1+1)*4*200;
          }
          position();
       }
      });
    });
    

    Вы этого хотели? Я думаю, он перемещает элемент вниз, чем вправо, вверх и влево каждый раз 200px.

    Пожалуйста, свяжитесь со мной, если вы находите это полезным, и это на самом деле работает 🙂

    Искренне Себастьян