使用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进行标题移动时的问题

回答

相关问题