有没有更好的方法来实现递增和递减？

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/