jquery动画循环问题

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

更新

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

repeats = 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 );