Déplacer une div à gauche et à droite en continu

Question

J'ai essayé de faire fonctionner cette animation javascript pendant des heures maintenant, et je n'ai rien obtenu. Le problème n'est pas de faire bouger ma boîte de div de gauche à droite (ou de haut en bas), c'est le contraire de chaque cas que j'ai du mal avec ça. Voici ce que j'ai jusqu'ici (De plus, j'ai défini des limites pour garder mon boîtier de mouvement contenu dans la fenêtre de vue, donc si elle frappe l'un des côtés, elle devrait aller dans la direction opposée). Toute aide est géniale à ce stade.

Note: la prochaine étape est de créer un effet de rebondissement pour la boîte, mais je vais m'inquiéter de cela une fois que j'aurai une animation simple à travailler.

 setInterval(function(){ 


    if(parseInt(box.style.left) > parseInt(viewDim.width - 57)){ 

     box.style.left -= parseInt(box.style.left) - 2 + 'px'; 



    /* } else if(parseInt(box.style.left) < 0){ 

     //debug_log("HIT!!"); 
     //parseInt(box.style.left) += 2 + 'px'; 

    } else if(parseInt(box.style.top) > parseInt(viewDim.height-58)){ 



    } else if(parseInt(box.style.top) < 0){*/ 



    } else { 

     box.style.left = parseInt(box.style.left) + 2 + 'px'; 
     //box.style.top = parseInt(box.style.top) + 5 + 'px'; 
    } 

}, 20); 

Answer 1

code comme ceci fonctionne toujours pour moi:

var boxWidth = 57, delta = 2; 
setInterval(function(){ 
    var left = parseInt(box.style.left); 
    if(left >= parseInt(viewDim.width - boxWidth)){ 
    delta = -2; 
    } 
    if (left <= 0) { 
    delta = 2; 
    } 
    box.style.left = left + delta + 'px'; 
}, 20); 

Answer 2

Cela peut donner une idée, comment le faire avec jQuery

http://jsfiddle.net/rFkpy/

$('#myDiv').click(function() { 
    $(this).animate({ 
    left: '+=250' 
    }, 1500, "easeOutBounce", function() { 
    // callBack 
    }); 
}); 

Answer 3

Bien que vous ayez votre solution maintenant, je ne pouvais pas m'empêcher de faire le code complet here.

La boîte de rebondissement rebondit autour de l'élément parent. Testé dans IE8, FF3 et Opera11.