Как в JQ организовать последовательность выполнения скриптов?

Question

[Сергей Игнатьев]

Здравствуйте.
Подскажите, как в JQ организовать цепочку выполнения скриптов?
Я не знаю слово, которым называется этот метод, чтобы в гуле посмотреть информацию…
Например, мне нужно поочередно выполнить 3 действия:

$(document).ready(function () {
    $(".progerss1").animate({width: "100%"}, 4000);
    $(".progerss2").animate({width: "100%"}, 4000);
    $(".progerss3").animate({width: "100%"}, 4000);
 });

Если можно, подскажите пожалуйста, как в данном примере решит задачу, и где посмотреть информацию про этот вопрос подробнее (например, если в дальнейшем понадобится пауза, между скриптами, запуск их по кругу.)

Answer 1

[0xD34F]

погуглил за вас

Comments

[Сергей Игнатьев]

Спасибо большое! Очень подробно написано!
Может быть подскажете, как зациклить эту функцию? Чтобы как выполнится 3я функция, заново, начинала выполняться первая?

$(document).ready(function () {

        $(".progress-second-build")
            .animate({ opacity: "1" }, 0 )
            .animate({ width: "100%" }, 4000 )
            .animate({ opacity: "0.5" }, 200 )
            .animate({ width: "0%" }, 0,
              
        
        function() {
            $(".progress-new-build")
            .animate({ opacity: "1" }, 0 )
            .animate({ width: "100%" }, 4000 )
            .animate({ opacity: "0.5" }, 200 )
            .animate({ width: "0%" }, 0,
                                         
        
        function() {
            $(".progress-commerce-build")
                .animate({ opacity: "1" }, 0 )
                .animate({ width: "100%" }, 4000 )
                .animate({ opacity: "0.5" }, 200 )
                .animate({ width: "0%" }, 0);
            });
        });
    
        
});

setInterval() делает так, что на второй круг, функции выполняются одновременно.

[0xD34F]

const $elems = $('.progress-second-build, .progress-new-build, .progress-commerce-build');
let i = -1;

(function animateNext() {
  $elems.eq(i = (i + 1) % $elems.length)
    .animate({ opacity: '1' }, 0)
    .animate({ width: '100%' }, 4000)
    .animate({ opacity: '0.5' }, 200)
    .animate({ width: '0%' }, 0, animateNext);
})();

[Сергей Игнатьев]

0xD34F, Спасибо вам большое! Я тоже так подумал сделать, но у меня не хватило знаний это правильно написать!
Буду учиться!
Очень вам благодарен!

Answer 2

[frees2]

Если через клик, то просто прописать через ; сколько угодно событий
onclick="load(event);........."load(event2);...............;return false"