有人可以帮忙吗,我正在尝试对 div 进行动画处理,使其向左移动 100 像素,然后返回到其原始位置/向右移动 100 像素。
我希望它在停止动画之前执行此操作 5 次。
有人可以告诉我如何让它工作吗?谢谢。
<script>
function loop() {
$('.sign_up').animate({right:'+=100px'}, 1000, function() {
$(this).animate({left:'-=100px'}, 1000, function() {
loop();
});
});
}
$(function() {
loop();
});
</script>
最佳答案
您可以使用计数器来确定何时停止循环。例如:
<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/
关于javascript animate div 向左100px 然后向右100px?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16233684/