如何循环 .animate JQuery [英] How to loop .animate JQuery
问题描述
我正在处理一个内部有图像的 div.我需要动画从页面的左右滚动,然后返回到右侧并继续循环.我查看了此处的许多帖子,但无法使脚本正常工作.
'$(document).ready(function(){函数循环(){$('#clouds').animate({left: '+=1400',},50000, 'linear', function(){环形();});
HTML
<代码>CSS
#clouds {位置:绝对;z-索引:500;右:0px;顶部:10px;}
解决方案试试这个:
JSFiddle http://jsfiddle.net/2YqH2/
您没有将云移回右侧.在循环函数中,我添加了
$('#clouds').css({right:0});
循环将从那里继续.我还更改了您的动画,以便为右"属性设置动画,因为您说您希望云从右向左移动.
此外,您的 javascript 格式不正确.确保你得到那些右大括号和括号!这是固定的 javascript.
$(document).ready(function() {函数循环(){$('#clouds').css({right:0});$('#clouds').animate ({右:'+=1400',}, 5000, '线性', 函数() {环形();});}环形();});
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.
'$(document).ready(function(){ function loop() { $('#clouds').animate({left: '+=1400',},50000, 'linear', function(){ loop(); });
HTML
< div id="clouds">< img border="0" alt="animated clouds" src="/images/clouds.png" />< /div>
CSS
#clouds { position:absolute; z-index:500; right:0px; top:10px; }
解决方案Try this:
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.
$(document).ready(function() { function loop() { $('#clouds').css({right:0}); $('#clouds').animate ({ right: '+=1400', }, 5000, 'linear', function() { loop(); }); } loop(); });
这篇关于如何循环 .animate JQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文