Javascript 使用jquery移动标题时遇到问题_Javascript_Jquery

Javascript 使用jquery移动标题时遇到问题

javascript jquery

Javascript 使用jquery移动标题时遇到问题,javascript,jquery,Javascript,Jquery,这不是硬件，而是我用来学习Javascript的一本编码书的挑战挑战在于使收割台向左移动200像素，然后向下移动200像素，向左移动200像素，然后向上移动200像素。我尝试了多种方法，但我得到了错误，或它跳跃，或我不能让它减少。我已经把我知道我需要做的事情的基本轮廓放在这里（这只是对角线）。谢谢你的帮助谢谢丹尼尔 <!DOCTYPE html> <html> <head> <title>Interactive programming&l

这不是硬件，而是我用来学习Javascript的一本编码书的挑战

挑战在于使收割台向左移动200像素，然后向下移动200像素，向左移动200像素，然后向上移动200像素。我尝试了多种方法，但我得到了错误，或它跳跃，或我不能让它减少。我已经把我知道我需要做的事情的基本轮廓放在这里（这只是对角线）。谢谢你的帮助

谢谢

丹尼尔

<!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>


交互式编程
你好，世界！
var-leftOffset=0；
var moveDown=0
var moveHeading=函数（）{
如果（leftOffset，使用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
    });
  });

var offleft=0；
var offtop=0；
函数位置（）{
$（'#heading'）.css（'margin-top'，offtop+'px'）；
$（'#heading'）.css（'margin-left'，offleft+'px'）；
}
$（函数（）{
$（{i:0}）。设置（{i:1}）动画{
持续时间：300，
“线性”，
步骤：功能（现在）{
如果（现在感谢Stefan！不幸的是，我希望使用setInterval方法来实现它，因为这是本书中的挑战。你对如何使用setInterval有什么建议吗？谢谢Sebastian！不幸的是，尽管挑战要求使用setInterval来移动它。例如，这会在循环中重复移动它，但是我希望它停止，然后向下移动并继续。'var leftOffset=0；var moveHeading=function（）{$（“#heading”）.offset（{left:leftOffset}）；leftOffset++；if（leftOffset>200）{leftOffset=0}；setInterval（moveHeading，30）；'
 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();
   }
  });
});