有沒有更好的方法來實現遞增和遞減？

Question

我正在做一個動畫，我需要移動我的div 25px。一旦div達到25px它應該翻轉回0px，它不應該停止任何方式。爲此，我需要一個函數來循環div。這是我到目前爲止：

var x = 0; 
    var condition = true; 

    var loopIt = function(){ 
     while(x < 25 && condition == true){ 
      x++; 
      console.log(x); 
      if(x == 25){ 
       condition = false; 
      } 
     } 

     while(x > 0 && condition == false){ 
      x--; 
      if(x == 0){ 
       condition = true; 
      } 
      console.log(x); 
     } 
     setTimeout(loopIt, 1000); 
    } 

    loopIt(); 

它運作良好，但我覺得這是醜陋的。有沒有更簡單的方法來歸檔相同的？

Answer 1

小提琴演示：http://jsfiddle.net/EPmLU/1/

function animateDiv() { 
    $('div').animate({ 
     left: '+=25' // animate left 25 
    }, 1000, function() { 
     $('div').css('left', '-=25'); // reset animated div to orig position 
     animateDiv(); 
    }); 
} 

animateDiv(); 

Answer 2

怎麼是這樣的：

function endless(){ 
    $("#div").animate({ 
     left:'+=25px', 
    }, 500, function() { 
     $("#div").animate({ 
      left:'-=25px', 
     }, 500, function() { 
      endless(); 
     }); 
    }); 
}; 
endless(); 

而這裏的jsfiddle：http://jsfiddle.net/79y2j/