如何循环.animate的JQuery [英] How to loop .animate JQuery

问题描述

我跟里面的图像单个分区的工作。我需要的动画从页面的右边，左边，然后复出滚动到右侧，并继续在一个循环。我看过了很多帖子放在这里，但我没能拿到剧本正常工作。

 '$（文件）。就绪（函数（）{
    函数循环（）{       $（'＃云），动画（{左：'+ = 1400'，}，50000，线性，函数（）{
           循环（）;
       }）;
 

HTML

 ＆LT; DIV ID =祥云＆GT;＆LT; IMG的边界=0ALT =动画云SRC =/图像/ clouds.png/＆GT;＆LT; / DIV＆GT;
 

CSS

  #clouds {
    位置：绝对的;
    的z-index：500;
    右：0像素;
    顶部：10px的;
}
 

解决方案

试试这个：

的jsfiddle http://jsfiddle.net/2YqH2/

你不是移动云回右侧。内循环功能，我添加

  $（'＃云），CSS（{右：0}）;
 

和循环将继续从那里。我也改变了你的动画，因为你说你想要的云自右向左移动到动画正确的属性。

此外，没有得到很好的形成你的JavaScript。确保你得到那些花括号和括号！下面是固定的JavaScript。

  $（文件）。就绪（函数（）{
    函数循环（）{
        $（'＃云），CSS（{右：0}）;
        $（'＃云'）。动画（{
            右：'+ = 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屋！