使用jQuery進行標題移動時的問題

這不是硬件，而是來自我用來嘗試學習Javascript的編碼書的挑戰。使用jQuery進行標題移動時的問題

挑戰是讓標題向左移動200px，然後移動200px，向左移動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>

來源

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

謝謝Stefan！不幸的是，我正在使用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」）。offset（{left：leftOffset}）; leftOffset ++; if（leftOffset> 200）{ leftOffset = 0 } }; setInterval（moveHeading，30）;' –

使用jQuery進行標題移動時的問題

回答

相關問題