Question

我正在尝试在循环中执行动画功能。我已经想到了它的一次迭代，但我无法弄清楚如何重复循环一定时间。下面是我的动画功能。请帮我弄清楚如何运行任何次数甚至使它成为一个永无止境的循环。

<script type="text/javascript">
$(document).ready(function(){
    var delay = 150;
    var times = 4;
    var i = 1;

    doMove = function() {
        if( i < times ){
            $('#lip').removeClass('lip'+i);
            $('#lip').addClass('lip'+(i+1));
        } else if ( i == times ) {
            $('#lip').removeClass('lip4');
            $('#lip').addClass('lip1');
        }

        ++i;
        if( i >= times ) {
            clearInterval( interval ) ;
        }
    }

    var interval = setInterval ( "doMove()", delay );


});
</script>

非常感谢。我是jquery的新手。

Answer 1

您的脚本中的延迟非常短暂 - 因此您可能没有看到更改发生。尝试更改

var delay = 150;

要

var delay = 1000; // 1 second

<强>更新

啊 - 你希望它在完成后再次运行......这是一个例子：

重复= 0将是无限循环，1将运行一次，2将运行两次，依此类推......

var delay = 150;
var times = 4;
var repeats = 3;
var i = 1;
var j = 0;

doMove = function() {
    if( i < times ){
        $('#lip').removeClass('lip'+i);
        $('#lip').addClass('lip'+(i+1));
    } else if ( i == times ) {
        $('#lip').removeClass('lip4');
        $('#lip').addClass('lip1');
    }

    ++i;
    if( i >= times ) {
        if (j < repeats || repeats == 0) {
            i = 1;
        } else {
            clearInterval( interval ) ;
        }
    }
    ++j;
}

var interval = setInterval ( "doMove()", delay );

Jquery动画循环问题

1 个答案: