Я хотел бы переместить элемент влево, используя цикл

Question

Бьюсь об заклад, у меня есть элементарный вопрос, но я не мог решить его в течение двух ночей. У меня есть 1 элемент "ul", и я просто хочу, чтобы он перемещал любое количество пикселей каждый, например. 2 секунды влево. Я хочу, чтобы он двигался, как этот шаг за шагом, а затем вернулся в исходное положение и начал двигаться снова. Я застрял, мой сценарий только перемещает его в конечную позицию и закончить.

window.onload = function moveUl(){  
var eUl = document.getElementById('change');  
var eLi = eUl.getElementsByTagName('li');
x = -300;

function move(){
    for(i=0;i< eLi.length;i++){
        eUl.style.marginLeft = i*x+'px'; 
    }
} 
setInterval(move,1000);
}

Это самое простое, что я могу придумать. Я знаю, что этот скрипт выполняет весь цикл через 1 секунду, но я пытаюсь сделать что-то вроде этого: переместить этот элемент влево, подождать, переместить больше влево и т.д.

Answer 1

Если вы хотите, чтобы он скользил, вы должны установить таймаут на каждую итерацию. Попробуйте написать функцию, которая выполняет одну смену, а затем вызывать эту функцию каждые 10 мс. Вы также можете посмотреть библиотеку Javascript, например jQuery , которая предоставляет хороший API для выполнения перемещения.

Answer 2

Вы имеете в виду что-то подобное?

window.onload = function moveUl()
{
    var eUl = document.getElementById('change');
    var eLi = eUl.getElementsByTagName('li');

    var delta = 0;
    function move()
    {
        for(i=0;i< eLi.length;i++)
            eUl.style.marginLeft = (-300*i+delta)+'px'; 
        delta -= 100; // Prepares for the next step
        if ( delta == -1000 )
            delta = 0; // Resets after 10 steps
    } 
    setInterval(move,1000);
}

Answer 3

Вы не можете вернуться с того места, с которого начали?

Почему бы просто не добавить новый цикл for в ход

    for(i=eLi.length; i>0 ;i--){
        eUl.style.marginLeft = i*x+'px'; 
    }

Вы также хотите, чтобы цикл продолжался бесконечно, то есть начало -> слева -> начало -> влево и снова?