Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.12.2021, 11:30
Интересующийся
Отправить личное сообщение для Dan Atst Посмотреть профиль Найти все сообщения от Dan Atst
 
Регистрация: 21.02.2015
Сообщений: 15

Как вызвать функцию после окончания другой?
Добрый день!
Подскажите пожалуйста, как вызвать функцию после окончания другой.
Пытался так, но не работает.
<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 {
  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;  
}
Т.е. я хочу, что сначала поочередно появился каждый элемент, а затем в обратном порядке скрыть их.
Ответить с цитированием
  #2 (permalink)  
Старый 03.12.2021, 11:44
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,126

как вариант если разберешься
requestAnimationFrame или setInterval
Ответить с цитированием
  #3 (permalink)  
Старый 03.12.2021, 12:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

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>
Ответить с цитированием
  #4 (permalink)  
Старый 03.12.2021, 12:56
Интересующийся
Отправить личное сообщение для Dan Atst Посмотреть профиль Найти все сообщения от Dan Atst
 
Регистрация: 21.02.2015
Сообщений: 15

Сообщение от рони Посмотреть сообщение
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>
Спасибо! Но вы меня не поняли) у вас циклично повторяется анимация. А мне надо сначала opacity:1 с 1-го блока до 5-го и потом назад opacity: 0 с 5-го блока до 1-го. Т.е. по сути reverse сделать
Ответить с цитированием
  #5 (permalink)  
Старый 03.12.2021, 14:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Dan Atst,
Сообщение от Dan Atst
А мне надо сначала opacity:1 с 1-го блока до 5-го и потом назад opacity: 0 с 5-го блока до 1-го.
что не так в предложенном коде?
Ответить с цитированием
  #6 (permalink)  
Старый 03.12.2021, 14:48
Интересующийся
Отправить личное сообщение для Dan Atst Посмотреть профиль Найти все сообщения от Dan Atst
 
Регистрация: 21.02.2015
Сообщений: 15

Сообщение от рони Посмотреть сообщение
Dan Atst,

что не так в предложенном коде?
он по два раза повторяет циклы
Ответить с цитированием
  #7 (permalink)  
Старый 03.12.2021, 14:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Dan Atst,
не понимаю
Ответить с цитированием
  #8 (permalink)  
Старый 03.12.2021, 15:11
Интересующийся
Отправить личное сообщение для Dan Atst Посмотреть профиль Найти все сообщения от Dan Atst
 
Регистрация: 21.02.2015
Сообщений: 15

Сообщение от рони Посмотреть сообщение
Dan Atst,
не понимаю
https://codepen.io/dannyarty/pen/zYEGMWO
Ответить с цитированием
  #9 (permalink)  
Старый 03.12.2021, 15:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

Dan Atst,
сделайте цикл по каждой группе блоков, как показано выше, если и в этом случае вам нужно что-то иное, то сформулируйте задачу как-то иначе и определитесь с html, может обернуть группы в отдельные div.
Ответить с цитированием
  #10 (permalink)  
Старый 03.12.2021, 17:05
Интересующийся
Отправить личное сообщение для Dan Atst Посмотреть профиль Найти все сообщения от Dan Atst
 
Регистрация: 21.02.2015
Сообщений: 15

Сообщение от рони Посмотреть сообщение
Dan Atst,
сделайте цикл по каждой группе блоков, как показано выше, если и в этом случае вам нужно что-то иное, то сформулируйте задачу как-то иначе и определитесь с html, может обернуть группы в отдельные div.
Я вроде объяснил ее максимально понятно и в принципе ваш код работает, но у него есть одно "но".
Мне надо:
Этап-1: Сделать видимыми поочередно блоки с 1-го по 5-ый
Этап-2: После этого сразу в обратном порядке сделать невидимыми блоки с 5-го по 1-ый

У вас работает, но почему-то каждый этап по два раза подряд, т.е.
Этап-1, Этап-1, Этап-2, Этап-2.
А мне надо: Этап-1, Этап-2.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как вызвать функцию из функции imedia Элементы интерфейса 13 26.09.2014 17:35
Как после ресайза вызвать обработчик один раз? Nanto Events/DOM/Window 1 23.08.2013 19:55
Как вызвать функцию из функции ? PheonixS AJAX и COMET 7 20.06.2010 09:51
Как вызвать событие после события определенного в onchange Наталья Events/DOM/Window 2 12.09.2009 13:51
Как передать элемент в функцию после createElement Oleg NT Общие вопросы Javascript 3 23.06.2008 02:11