javascript動畫div左100px，然后右100px？

Question

有人可以幫忙嗎，我正在嘗試為div設置動畫，以使其向左移動100px，然后返回其原始位置/因此向右移動100px。

我希望它在停止動畫之前這樣做5次。

有人可以告訴我如何使它工作嗎，謝謝。

<script>

function loop() {
    $('.sign_up').animate({right:'+=100px'}, 1000, function() {
        $(this).animate({left:'-=100px'}, 1000, function() {
            loop();
        });
    });
}

$(function() {
    loop();
});

</script>

Answer 1

您可以使用計數器來確定何時停止循環。 例如：

<script type="text/javascript">
var loopCount = 0;
function loop() {
    $('.sign_up').animate({ left: '-=100px' }, 1000, function () {
        $(this).animate({ left: '+=100px' }, 1000, function () {
            loopCount++;
            if (loopCount < 5)
                loop();
        });
    });
}

$(function () {
    loop();
});
</script>

我還將第一個animate語句切換為使用left css屬性（而不是right left right 。 當我聲明sign_up div時，此代碼為我工作了：

<div class="sign_up"  style="position:absolute;top:300px;left:300px;width:200px;height:200px;background:Green;">
    Hello!
</div>

更新
這是一個有效的jsfiddle： http : //jsfiddle.net/peFVT/