Question

我对脚本和jQuery非常陌生，即使我彻底试图找到我的问题的答案，我也不太明白。

我正在为该网站制作一个非Flash动画介绍。这是动画部分的代码（它的一部分......但其余部分就像这样）。我需要的是弄清楚如何在完成后动画循环这个动画，而无需刷新页面。请帮助！

<script type="text/javascript">

$(document).ready(function() {
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true});
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true});

    //this list goes on, but i figured this is enough for example purposes


});


$(function() {
    $("#enter").delay(2000).animate({opacity:1.0}, { duration: 2000, queue: true });

    $("#enter").hover(highlight, highlight);
           });

function highlight (evt) {
    $("#enter").toggleClass("highlighted");
    }

</script>

我需要在循环上制作动画的部分是$ pic0到＃pic0-g ....如果有人能给我一个提示，我会非常感激。我试图找到一种方法将所有动画组合在一个函数中，但在组合不同的选择器和不同的动作时遇到了问题。

Answer 1

你可能想要使用setTimeout（），并在函数调用中放置你需要循环的部分。

E.g：

setTimeout(AnimationFunctionName(), 10000)

然后在AnimationFunctionName（）的末尾，再次调用setTimeout，它将循环。

Answer 2

我会将所有动画放在一个函数中，然后在最后一个动画完成时调用它（请注意jQuery documentation for .queue()中完成相同的操作）。这可以这样做：

function animateThings() {
    $('#pic0').delay(2000).animate({opacity:1.0}, {duration: 3000, queue: true});
    $('#pic0-d').delay(4000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-i').delay(5000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-e').delay(6000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-n').delay(7000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-s').delay(8000).animate({opacity:1.0}, {duration: 1700, queue: true});
    $('#pic0-g').delay(9000).animate({opacity:1.0}, {duration: 1700, queue: true})
    //more animations
    $('selector-for-last-animation').delay(something).animate({name: value}, {duration: something, queue: true, complete: animateThings});
}
animateThings();

jQuery动画（不同的选择器和不同的动作）

2 个答案: