jqueryでヘッダーを移動する際の問題

これはハードウェアではなく、Javascriptを学習するために使用しているコーディングブックからの挑戦です。jqueryでヘッダーを移動する際の問題

ヘッダーを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>

出典

2016-12-31 Daniel Gardner

それはjQueryのアニメーション（）関数を使用して容易になるだろう。

例：

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 
    }); 
    });

出典

2016-12-31 20:16:36

心からあなたはそれが役に立つなら、私に手を差し伸べる、それが実際に動作します:)

してください。 – SLePort

ステファンありがとう！残念ながら、私はsetIntervalメソッドを使ってそれをやってみたいと思っています。あなたはsetIntervalでどのようにそれを行うための提案がありますか？ –

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ごとに右、上、左に移動すると思う。

スニペットは動作しませんセバスチャン

出典

2016-12-31 20:33:50

セバスチャンありがとう！残念ながら、挑戦はsetIntervalsを使用して移動することを求めていました。例えば、これはループ上で繰り返し左に移動しますが、停止してから下に移動して続行します。 –

'var leftOffset = 0; var moveHeading = function（）{ $（ "＃heading"）。オフセット（{left：leftOffset}）; leftOffset ++; if（leftOffset> 200）{ leftOffset = 0 } }; setInterval（moveHeading、30）; ' –

jqueryでヘッダーを移動する際の問題

答えて

関連する問題