javascript动画div向左100px然后100px对吗？

【问题标题】：javascript animate div 100px left then 100px right?javascript动画div向左100px然后100px对吗？
【发布时间】：2013-04-26 18:33:16
【问题描述】：

有人可以帮助我尝试为 div 设置动画，使其向左移动 100 像素，然后返回到其原始位置/因此向右移动 100 像素。

我希望它在停止动画之前执行 5 次。

谁能告诉我如何让它工作谢谢。

<script>

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

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

</script>

【问题讨论】：

调用函数5次
这个运气好...？

标签： javascript

【解决方案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>

我还使用left css 属性而不是right 将第一个animate 语句切换为向左动画。当我如下声明 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/

【讨论】：