Question

我正在处理一个带有图像的div。我需要动画从页面的左下方滚动，然后回到右边并继续循环。我在这里查看了很多帖子，但是我无法使脚本正常工作。

'$(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;
}

Answer 1

试试这个：

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

你没有将云移回右侧。在循环函数中，我添加了

$('#clouds').css({right:0});

并且循环将从那里继续。我也改变了你的动画来动画“右”属性，因为你说你希望云从右向左移动。

另外，你的javascript格式不正确。确保你得到那些结束括号和括号！这是固定的javascript。

$(document).ready(function() {
    function loop() {
        $('#clouds').css({right:0});
        $('#clouds').animate ({
            right: '+=1400',
        }, 5000, 'linear', function() {
            loop();
        });
    }
    loop();
});

Answer 2

以上所有答案都是“ hack”解决方案。

根据jQuery documentation for animate()，第二个参数是一个options对象，它具有参数complete；动画完成时调用的功能。

在OP的情况下，此option对象的配置如下：

function loop() {
    $('#clouds').css({right:0});
    $('#clouds').animate({
        right: '+=1400',
    }, {
        duration: 5000, 
        easing: 'linear', 
        complete: loop
    });
}
loop();

Answer 3

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：

<div id="clouds"><img border="0" alt="animated clouds" src="../img/image.png" /></div>

你的错误是你从不调用函数循环。看看it works,你可以删除alert('a')，因为它只是一个标志，知道循环重新开始。现在你需要进行反向运动（比如重置div，重新开始运动循环）。

Answer 4

只是要向其他人添加一些信息，如果您不打算使用animate()，则应使用一些setTimeout()来防止错误 Uncaught RangeError: Maximum call stack size exceeded

示例（使用jQuery ）：

<强>的.js

function looping() {
    $('.loader').fadeOut(1000);
    $('.loader').fadeIn(1000);
    setTimeout(function(){
        looping();
    }, 10);
}

<强> html的

<div class='loader'>Loading...</div>

如何循环.animate JQuery

4 个答案: