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

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

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

Спасибо,

Daniel

<!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"). Offset ({left: leftOffset}); leftOffset ++; если (левыйOffset> 200) { левыйOffset = 0 } }; setInterval (moveHeading, 30); ' –

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

ответ

Смежные вопросы