Je voudrais déplacer un élément vers la gauche en utilisant la boucle

Question

Je parie que j'ai une question élémentaire, mais je ne pouvais pas le résoudre pendant deux nuits. J'ai 1 élément "ul" et je veux juste qu'il déplace n'importe quelle quantité de pixels, par exemple. 2 secondes à gauche. Je veux qu'il bouge comme ça étape par étape, puis revenir à la position d'origine et recommencer à bouger. J'ai été coincé, mon script ne le déplace que vers la position finale et finit.

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

Ceci est le plus simple que je peux penser. Je sais que ce script exécute une boucle complète après 1 seconde, mais j'essaie de faire quelque chose comme ceci: Déplace cet élément vers la gauche, attend, bouge plus vers la gauche et ainsi de suite.

Answer 1

Voulez-vous dire quelque chose comme ça?

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 2

Le problème est-il que vous ne pouvez pas revenir d'où vous avez commencé?

Pourquoi ne pas simplement ajouter une nouvelle boucle en mouvement

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

Voulez-vous aussi à la boucle pour toujours à savoir commencer -> gauche -> Démarrer -> à gauche et à nouveau?

Answer 3

Si vous souhaitez le faire glisser, vous devez effectuer une temporisation par itération. Essayez d'écrire une fonction qui effectue un seul décalage, puis appelez cette fonction toutes les 10 ms. Vous pouvez également regarder dans une bibliothèque Javascript comme jQuery qui fournit une belle API pour faire le déménagement.