Форум

Dan Atst · #1 (**permalink**) 03.12.2021, 11:30

Добрый день!
Подскажите пожалуйста, как вызвать функцию после окончания другой.
Пытался так, но не работает.

<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;  
}

Т.е. я хочу, что сначала поочередно появился каждый элемент, а затем в обратном порядке скрыть их.

MallSerg · #2 (**permalink**) 03.12.2021, 11:44

как вариант если разберешься
requestAnimationFrame или setInterval

рони · #3 (**permalink**) 03.12.2021, 12:22

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 · #4 (**permalink**) 03.12.2021, 12:56

Сообщение от рони

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

Dan Atst,

Сообщение от Dan Atst

А мне надо сначала opacity:1 с 1-го блока до 5-го и потом назад opacity: 0 с 5-го блока до 1-го.

что не так в предложенном коде?

Dan Atst · #6 (**permalink**) 03.12.2021, 14:48

Сообщение от рони

Dan Atst,

что не так в предложенном коде?

он по два раза повторяет циклы

рони · #7 (**permalink**) 03.12.2021, 14:54

Dan Atst,
не понимаю

Dan Atst · #8 (**permalink**) 03.12.2021, 15:11

Сообщение от рони

Dan Atst,
не понимаю

https://codepen.io/dannyarty/pen/zYEGMWO

рони · #9 (**permalink**) 03.12.2021, 15:51

Dan Atst,
сделайте цикл по каждой группе блоков, как показано выше, если и в этом случае вам нужно что-то иное, то сформулируйте задачу как-то иначе и определитесь с html, может обернуть группы в отдельные div.

Dan Atst · #10 (**permalink**) 03.12.2021, 17:05

Сообщение от рони

Dan Atst,
сделайте цикл по каждой группе блоков, как показано выше, если и в этом случае вам нужно что-то иное, то сформулируйте задачу как-то иначе и определитесь с html, может обернуть группы в отдельные div.

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

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

Форум

Справочник

Discord чат

Курсы javascript