如何循环 .animate JQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11401535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to loop .animate JQuery
提问by ac12
I am working with a single div with an image inside. I need the animation to scroll from right-left of the page and then comeback to the right and continue in a loop. I have looked over many posts on here but am not able to get the script working properly.
我正在处理一个内部有图像的 div。我需要动画从页面的左右滚动，然后返回到右侧并继续循环。我查看了此处的许多帖子，但无法使脚本正常工作。
'$(document).ready(function(){
function loop() {
$('#clouds').animate({left: '+=1400',},50000, 'linear', function(){
loop();
});
HTML
HTML
< div id="clouds">< img border="0" alt="animated clouds" src="/images/clouds.png" />< /div>
CSS
CSS
#clouds {
position:absolute;
z-index:500;
right:0px;
top:10px;
}
回答by tb11
Try this:
尝试这个：
JSFiddlehttp://jsfiddle.net/2YqH2/
JSFiddle http://jsfiddle.net/2YqH2/
You're not moving the clouds back to the right side. Inside the loop function, I added
您不会将云移回右侧。在循环函数内部，我添加了
$('#clouds').css({right:0});
and the loop will continue from there. I also changed your animation to animate the "right" property since you said you wanted the clouds to move from right to left.
循环将从那里继续。我还更改了您的动画以设置“正确”属性的动画，因为您说您希望云从右向左移动。
Also, your javascript was not well-formed. Make sure you get those closing braces and parentheses! Here's the fixed javascript.
此外，您的 javascript 格式不正确。确保你得到那些右大括号和括号！这是固定的javascript。
$(document).ready(function() {
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate ({
right: '+=1400',
}, 5000, 'linear', function() {
loop();
});
}
loop();
});
回答by fullStackChris
All the above answers are somewhat 'hack' solutions.
以上所有答案都有些“黑客”解决方案。
According to the jQuery documentation for animate(), the second paramter is an optionsobject which has a parameter complete; a function that is called when the animation completes.
根据jQuery 文档animate()，第二个参数是一个options具有参数的对象complete；动画完成时调用的函数。
In OP's case, this optionobject would be configured as follows:
在 OP 的情况下，此option对象将配置如下：
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate({
right: '+=1400',
}, {
duration: 5000,
easing: 'linear',
complete: loop
});
}
loop();
回答by jcho360
JAVASCRIPT:
爪哇脚本：
$(document).ready(function() {
$('#clouds').click(function() {
loop();
});
function loop(){
alert('a');
$('#clouds').animate({
opacity: 0.25,
left: '+=1400',
height: 'toggle'
}, 5000, 'linear', function() {
loop();
});
}
});
HTML:
HTML：
<div id="clouds"><img border="0" alt="animated clouds" src="../img/image.png" /></div>
your error is that you are not calling the function loop never. look how it works,you can remove the alert('a')because it's just a flag to know that the cycle start over. now you need to make the reverse movement (like reset the div, to start over the movement cycle).
你的错误是你从来没有调用函数循环。看看它是如何工作的，你可以删除alert('a')它，因为它只是一个标志，知道循环重新开始。现在您需要进行反向运动（例如重置 div，以重新开始运动循环）。
回答by Jo?o Pedro Raldi
Just to add some info to others, if you're not going to use animate()you should use some setTimeout()to prevent the error Uncaught RangeError: Maximum call stack size exceeded
只是为了向其他人添加一些信息，如果你不打算使用animate()你应该使用一些setTimeout()来防止错误Uncaught RangeError: Maximum call stack size exceeded
Example(Using jQuery):
示例（使用 jQuery）：
.js
.js
function looping() {
$('.loader').fadeOut(1000);
$('.loader').fadeIn(1000);
setTimeout(function(){
looping();
}, 10);
}
.html
.html
<div class='loader'>Loading...</div>
