Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как вызвать функцию после окончания другой? (https://javascript.ru/forum/jquery/83416-kak-vyzvat-funkciyu-posle-okonchaniya-drugojj.html)

Dan Atst 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 03.12.2021 11:44
как вариант если разберешься
http://javascript.ru/forum/misc/4962...tml#post326928

рони 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 03.12.2021 12:56
Цитата:
Сообщение от рони (Сообщение 542051)
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 сделать

рони 03.12.2021 14:13
Dan Atst,
Цитата:
Сообщение от Dan Atst
А мне надо сначала opacity:1 с 1-го блока до 5-го и потом назад opacity: 0 с 5-го блока до 1-го.
что не так в предложенном коде?

Dan Atst 03.12.2021 14:48
Цитата:
Сообщение от рони (Сообщение 542059)
Dan Atst,

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

рони 03.12.2021 14:54
Dan Atst,
не понимаю

Dan Atst 03.12.2021 15:11
Цитата:
Сообщение от рони (Сообщение 542062)
Dan Atst,
не понимаю
https://codepen.io/dannyarty/pen/zYEGMWO

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

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

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


Часовой пояс GMT +3, время: 07:24.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице