Перемещение div влево и вправо непрерывно

Question

Я пытался заставить эту анимацию JavaScript работать часами, и у меня ничего не получилось. Проблема не в том, что мой блок div перемещается слева направо (или сверху вниз), а в противоположность каждому случаю, когда у меня возникают проблемы. Вот что у меня есть (кроме того, я установил границы, чтобы мой блок перемещения содержался в окне просмотра, поэтому, если он касается любой из сторон, он должен двигаться в противоположном направлении). На данный момент любая помощь - это здорово.

Примечание: следующий шаг - создать эффект отскакивания для бокса, но я буду беспокоиться об этом, как только у меня заработает простая анимация.

      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

Код, подобный этому, всегда работает для меня:

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

Хотя у вас есть ваше решение сейчас, я не мог помочь себе сделать полный код здесь .

Отскакивающая рамка подпрыгивает внутри родительского элемента. Протестировано в IE8, FF3 и Opera11.

Answer 3

Это может дать представление о том, как это сделать с помощью jQuery

http://jsfiddle.net/rFkpy/

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