如何循环 .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屋！