JQuery анимация (разные селекторы и разные действия)

Question

Я очень плохо знаком со сценариями и, в частности, с jQuery, и хотя я тщательно пытался найти ответ на свой вопрос, я не совсем понял его.

Я создаю не-вспышка-анимация интро для сайта.Вот код (часть этого ... но остальное работает так же, как это) анимированных частей.Что мне нужно, это выяснить, как зациклить эту анимацию после ее завершения, не обновляя страницу.Пожалуйста, помогите!

<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

Я бы поместил все анимации в функцию и затем вызвал ее, когда последняя анимация будет завершена (обратите внимание, что то же самое делается в документации jQuery для .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();

Answer 2

Возможно, вы захотите использовать setTimeout () и поместить части, которые вам нужны для зацикливания, в вызов функции.

например:

setTimeout(AnimationFunctionName(), 10000)

Затем в конце AnimationFunctionName () снова вызовите setTimeout, и он зациклится.