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

这样的事情怎么样：

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

这里是jsfiddle：http://jsfiddle.net/79y2j/

Answer 2

小提琴演示：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();

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

2 个答案: