0

这是代码：

var stripeAnimation = function() {

var streetDivWidth = $('.street_name').width();
var streetFull = $('.street_name .street_name_text');

for(var i=0; i<streetFull.length; i++) {
    var item = $(streetFull[i]);
    var widthFull = item.width();
    var remainder = widthFull - streetDivWidth;
    var animationSpeed = widthFull * 5;
    var summary = streetDivWidth - widthFull;
    if(summary < 0) {
        item.children('.gradient_span').addClass('gradient');
        infinite();
        setTimeout(infinite, 1000);
    }

}
function infinite() {
    item.animate({
        marginLeft: '-' + remainder + 'px'
    }, animationSpeed).animate({
            marginLeft: 0
        }, widthFull).delay(1000);
}

}
$(document).ready(function() {
    stripeAnimation();
});

看起来它应该在 1000 毫秒的延迟内一遍又一遍地循环动画 - “setTimeout（infinite，1000）；”。但事实并非如此。请帮忙！

4

3 回答 3

0

setTimeout只会调用一次您的函数，但是正如 Arun P 所说，您可以选择 using setInterval，但不建议将其用于动画。setInterval 的问题在于，您指定的延迟间隔是调用它之前的最短时间，但不是在该间隔结束时将调用它的承诺。

例如，如果您设置了 300 毫秒的间隔，但队列被其他操作（UI 或其他 JS 操作）占用了 600 毫秒，那么您的函数将被调用两次，一个接一个，没有延迟，这会使您的动画不均匀。您不能确保将在您的时间间隔内调用超时，仅不小于该时间间隔。

更好的方法是使用 setTimeout 进行第一次初始调用，就像您所做的那样，然后在infinite()函数调用结束时setTimeout(infinite, 1000)再次调用。

综上所述，如果适用，最好的动画方法是 requestAnimationFrame 方法，你可以在这里查看：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

于 2013-10-20T09:17:21.530 回答
0

剩余变量是本地的，你像全局函数一样使用它。应该在全球范围内声明它。

于 2013-10-20T09:02:42.723 回答
0

如果要循环，则需要使用 setInterval()

setInterval(infinite, 10000);

然后

function infinite() {
    item.animate({
        marginLeft: '-' + remainder + 'px'
    }, animationSpeed).animate({
            marginLeft: 0
        }, widthFull);
}
于 2013-10-20T08:59:05.577 回答