Как вызвать функцию после окончания другой?
Добрый день!
Подскажите пожалуйста, как вызвать функцию после окончания другой. Пытался так, но не работает. <div class="item item-1">Блок 1</div> <div class="item item-2">Блок 2</div> <div class="item item-3">Блок 3</div> <div class="item item-4">Блок 4</div> <div class="item item-5">Блок 5</div> animfw($('.item')); $.when(animfw($('.item'))).done(function() { animbw($('.item')); }); function animbw(elem) { for (let j = 4; j > -1; j--) { setTimeout(function(){ $('.item:eq('+j+')').animate({'opacity':0}, 1000); },4000 - ( j * 1000 )); } } function animfw(elem) { for (let j = 0; j < 5; j++) { setTimeout(function(){ $('.item:eq('+j+')').animate({'opacity':1}, 1000); },1000 + ( j * 1000 )); } } Вот стили Код:
.item { |
как вариант если разберешься
http://javascript.ru/forum/misc/4962...tml#post326928 |
Dan Atst,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .item { display: flex; align-items: center; justify-content: center; font-family: Roboto; font-size: 60px; font-weight: 600; color: #fff; text-transform: uppercase; opacity: 0; } .item-1 { width: 100%; height: 100vh; position: absolute; background: #8b36e9; } .item-2 { width: 100%; height: 100vh; position: absolute; background: #444; } .item-3 { width: 100%; height: 100vh; position: absolute; background: #ffaa41; } .item-4 { width: 100%; height: 100vh; position: absolute; background: #cd9090; } .item-5 { width: 100%; height: 100vh; position: absolute; background: #aec5b4; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { const items = $(".item"), length = items.length; let n = 0, k = opacity = 1; (function anim() { if (n < 0) return; items.eq(n).animate({ opacity }, 1000, anim); if (n == length - 1 && opacity) { k = -1, opacity = 0, n = length }; n += k; })() }); </script> </head> <body> <div class="item item-1">Блок 1</div> <div class="item item-2">Блок 2</div> <div class="item item-3">Блок 3</div> <div class="item item-4">Блок 4</div> <div class="item item-5">Блок 5</div> </body> </html> |
Цитата:
|
Dan Atst,
Цитата:
|
Цитата:
|
Dan Atst,
не понимаю |
Цитата:
|
Dan Atst,
сделайте цикл по каждой группе блоков, как показано выше, если и в этом случае вам нужно что-то иное, то сформулируйте задачу как-то иначе и определитесь с html, может обернуть группы в отдельные div. |
Цитата:
Мне надо: Этап-1: Сделать видимыми поочередно блоки с 1-го по 5-ый Этап-2: После этого сразу в обратном порядке сделать невидимыми блоки с 5-го по 1-ый У вас работает, но почему-то каждый этап по два раза подряд, т.е. Этап-1, Этап-1, Этап-2, Этап-2. А мне надо: Этап-1, Этап-2. |
Цитата:
|
Цитата:
вы не видите разницы между 10 блоками и 5-ю? определитесь уже сколько у вас блоков!!! в одном месте 10 в другом 5. |
Вызвать необходимую функцию из тела самой функции
|
Часовой пояс GMT +3, время: 09:35. |