12

我正在使用一个内部带有图像的 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;
}
4

4 回答 4

20

尝试这个：

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();
});
于 2012-07-09T19:24:11.893 回答
4

以上所有答案都是一些“黑客”解决方案。

根据jQuery 文档animate()，第二个参数是一个options有参数的对象complete；动画完成时调用的函数。

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

function loop() {
    $('#clouds').css({right:0});
    $('#clouds').animate({
        right: '+=1400',
    }, {
        duration: 5000, 
        easing: 'linear', 
        complete: loop
    });
}
loop();
于 2019-02-23T10:45:58.877 回答
1

只是为了向其他人添加一些信息，如果你不打算使用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>
于 2018-03-21T14:22:53.007 回答
0

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>

你的错误是你从来没有调用函数循环。看看它是如何工作的，你可以删除它，alert('a')因为它只是一个知道循环重新开始的标志。现在您需要进行反向运动（例如重置 div，以重新开始运动周期）。

于 2012-07-09T19:18:02.713 回答