連續左右移動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
  });
});