Как последовательно вывести все <div> с html страницы с помощью плавного появления изменяя opacity

@YuriiM · Регистрация: 07.11.2023

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="container">
    <button class="btn", onclick="myMove()">Начать показ</button>
    <div class="zagolovok">
        <p>Пример выполнения задания</p>
    </div>
    <div class="content">
        <div class="malikovIvan" style="margin:0 auto;">Маликов Иван </div>        
    </div>
    <div class="img0"><img src="imade/1.png" style="height: 140px; width:20px; "></div>    
        <div class="content">
            <div class="malikovIvan" style="margin:0 auto;">Маликов Филат Иванович </div>
        </div>
            <div class="img1"><img src="imade/1.png" style="height: 140px; width:20px; "></div>   
            <div class="img2"><img src="imade/2.png" style="height: 140px; width:100px;"></div>
            <div class="img3"><img src="imade/3.png" style="height: 140px; width:100px;"></div>  
   
    <div class="content">
        <div class="malikov">Маликов Григорий Филатович</div>
        <div class="malikov">Маликов Василий Филатович</div>
        <div class="malikov">Маликов Спиридон Филатович</div>
    </div>
</div>

html

JavaScript
1
2
3
4
5
6
7
8
9
const element = document.querySelectorAll('#container > div');   
async function delayedLoop() {
for (var i = 0; i < element.length; i++) {
  await new Promise((resolve) => setTimeout(resolve, 1000));
    console.log(element[i]);
  
}
}
delayedLoop()

К сожалению на большее сил не хватило. Спасибо даже за намек как делать дальше. Хочется сделать чтобы все дивы плавно проявлялись, постепенно показываю всю картину в целом.

@voraa · 09.08.2024, 17:28

Какие именно дивы?
Все-Все? Т.е сначала плавно появится div с классом zagolovok, потом div с классом content, потом внутри его div с классом malikovIvan И так далее. Сначала появляется внешний div, потом внутри его появляются внутренние ?

Зачем у div классы img0, img1, img2, img3? Они имеют разное оформление?

@kidASM · 09.08.2024, 21:25

Появление или скрытие - это внешний вид (т.е. видит ли пользователь элемент). За внешний вид отвечает CSS.
Почитай про такие свойства как "opacity" и "transition". Да и в целом про CSS анимацию.

@YuriiM · 12.08.2024, 08:43 **[ТС]**

Извините voraa за долгий ответ, имеется ввиду все дивы последовательно, все родительские и дочерние, с "opacity" и "transition" я разобрался, но теперь не понимаю как из дивов в ДОМ, создать массив, или есть какие-то другие методы перебора и вывода. Img это разные рисунки и должны появляться тоже последовательно.
Спасибо за любую помощь.

@voraa · 12.08.2024, 19:07

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

как из дивов в ДОМ, создать массив,

JavaScript
1
const elements = [...document.querySelectorAll('#container > div')];

@YuriiM · 13.08.2024, 15:49 **[ТС]**

Уважаемый voraa, посмотрите почему у меня не показывает дивы из DOM с изменением свойства opacity от 0 до 1. Извините за навязчивость. Заранее спасибо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<section id="container">
    <button class="btn", onclick="myMove()">Начать показ</button>
    <div class="zagolovok">
        <p>Проба</p>
    </div>
    <div class="content">
        <div class="malikovIvan" style="margin:0 auto;">Маликов Иван </div>        
    </div>
    <div class="wrapper0"><img src="imade/1.png" style="height: 140px; width:20px; "></div> 
    <div class="section"> 
        <div class="content">
            <div class="malikovIvan" style="margin:0 auto;"> Филат</div>
        </div>
            <div class="wrapper1"><img src="imade/1.png" style="height: 140px; width:20px; "></div>   
            <div class="wrapper2"><img src="imade/2.png" style="height: 140px; width:100px;"></div>
            <div class="wrapper3"><img src="imade/3.png" style="height: 140px; width:100px;"></div>  
    </div>  
    <div class="content">
        <div class="malikov"> Григорий Филатович</div>
        <div class="malikov"> Василий Филатович</div>
        <div class="malikov">Спиридон Филатович</div>
    </div>
</section>
<script src="main.js"></script>
    
</body>
</html>

Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const elements = [...document.querySelectorAll('#container > div')]; 
const element = document.querySelectorAll('#container > div'); 
 
async function myMove() {
      for (let i = 0; i < elements.length; i++) {
          element.src = '';
          element.classList.remove('animate');
          element.src = elements[i];
          element.classList.add('animate');
          await (function () {
                            return new Promise ( (res) => {
                                element.addEventListener('transitionend',
                                    function hte (event) {
                                        if (event.propertyName === 'opacity') {
                                            this.removeEventListener('transitionend', hte);
                                            res();
                                        }
                                    }
                                )               
                            })
                        })();
                }
            }

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container{
    background:url(imade/fon.jpg);
    
}
#container div{
    opacity:0;
}
#container div.animate {
    transition:
        opacity 3s 5s;     
    opacity: 1;
}
@keyframes opacity {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

@voraa · 13.08.2024, 22:17

Потому, что

JavaScript
1
const element = document.querySelectorAll('#container > div');

element - это не отдельный элемент. Это объект типа NodeList, который содержит все найденные элементы.
Читайте документацию. Что возвращает функция, каковы свойства и методы возвращаемого объекта
https://developer.mozilla.org/... electorAll
https://developer.mozilla.org/... I/NodeList

Ну нельзя писать программы, не зная, что возвращает функция.
NodeList - итерируемый объект. Его можно использовать в цикле for-of и массив тут совсем не обязателен

JavaScript
1
2
3
4
const elements = document.querySelectorAll('#container > div'); 
for (const element of elements) {
   // Тут уже element будет очередным отдельным найденным div
}

Если вы указали селектор '#container > div' то будут выбраны только строго дочерние div в #container. Дивы содержащиеся в этих дочерних, выбраны не будут. Я так и не понял, что именно вам надо.

@YuriiM · 16.08.2024, 12:18 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<section id="container">
    <button class="btn", onclick="myMove()">Начать показ</button>
    <div class="zagolovok">
        <p style="margin-bottom:30px;"></p>
    </div>
    <div class="zagolovok" >
        <p class="malikov" ></p>        
    </div>
    <div class="zagolovok" >
           <img src="imade/1.png" style="height: 140px; width:100px; margin:0 auto;">
    </div>
    <div class="zagolovok">
            <p class="malikov" ></p>
    </div>
    
    <div class="zagolovok"> 
            <img src="imade/2.png" style="height: 140px; width:300px; margin:-10px auto;">
    </div>
    
      
    <div class="zagolovok" >
        <p class="malikov"></p>
        <p class="malikov"></p>
        <p class="malikov" ></p>
    </div>
</section>

CSS
1
2
3
4
5
6
7
8
#container div{
    opacity:0;   
}
#container div.animate {
    transition:
        opacity 3s 5s;     
    opacity: 1;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const elements = document.querySelectorAll('#container > div'); 
    // second = document.querySelectorAll( "div:nth-of-type(2)"), //ищем каждый элемент див являющийся вторым элементом родительского блока
    // third = document.querySelectorAll( ":last-of-type" );       //ищем последний элемент родительского блока
 async function myMove() {  
 for (const element of elements) {  
  element.classList.add('animate'); 
  await (function () {                                        
    return new Promise ( (res) => {      
        element.addEventListener('transitionend',   
            function hte (event) {
                if (event.propertyName === 'opacity') {
                    this.removeEventListener('transitionend', hte);
                    res();
                     console.log('element');
                }
            }
        )               
    })       
      })
    }
  }

[B]
Подскажите пожалуйста, почему элементы дивов не перебираются и не вводятся с применением opacity, а выводятся все сразу. Наверно ошибка в применении Async/Await. но не могу понять где.[B]

@voraa · 16.08.2024, 13:03

Где вызов той функции, которая после await?
После await должен быть промис. В вашем случае вызов функции, которая вернет промис.

@YuriiM · 16.08.2024, 17:26 **[ТС]**

Перечитал много, но не смог разобраться, может подскажете код для моего случая. Извините, я только разбираюсь с практической стороной javascript.

@voraa · 19.08.2024, 20:18

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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<head>
<style>
    #container>div {
        position: relative;
        width: 250px;
        height: 50px;
        margin: 20px 0;
        background-color: blue;
        opacity: 0;
    }
    #container>div.animate {
        opacity: 1;
        transition: opacity 3s;
    }
</style>
</head>
<body>
    <button id="start" type="button">Animate</button>
    <div id="container">
        <div> DIV1 </div>
        <div> DIV2 </div>
        <div> DIV3 </div>
        <div> DIV4 </div>
        <div> DIV5 </div>
    </div>  
<script>
document.getElementById('start').addEventListener('click', () => {
    const divs = document.querySelectorAll('#container>div');
 
    function anim (div) {
        div.classList.add('animate');
        return new Promise (res => {
            div.addEventListener('transitionend', function hte (event) {
                if (event.propertyName === 'opacity') {
                    div.removeEventListener('transitionend', hte);
                    res();
                }
            })
        })      
    }
    
    (async function () {    
        for (const div of divs) {
            await anim(div)
        }
    }) ();
        
});
</script>
</body>

Второй пример тупо по таймеру (равному времени изменеия прозрачности)

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<head>
<style>
    #container>div {
        position: relative;
        width: 250px;
        height: 50px;
        margin: 20px 0;
        background-color: blue;
        opacity: 0;
    }
    #container>div.animate {
        opacity: 1;
        transition: opacity 3s;
    }
</style>
</head>
<body>
    <button id="start" type="button">Animate</button>
    <div id="container">
        <div> DIV1 </div>
        <div> DIV2 </div>
        <div> DIV3 </div>
        <div> DIV4 </div>
        <div> DIV5 </div>
    </div>  
<script>
document.getElementById('start').addEventListener('click', () => {
    const divs = document.querySelectorAll('#container>div');
 
    function anim (n) {
        divs[n].classList.add('animate');
        if (n < divs.length - 1) setTimeout (() => anim(n+1), 3000);
    }
    
    anim(0);
    
});
</script>
</body>

Изучите, свое сделайте аналогично.

@YuriiM · 20.08.2024, 10:48 **[ТС]**

Спасибо voraa, все работает, я все еще работаю методом проб и ошибок, поэтому продвигаюсь очень медленно, хотя когда вижу ваш код, все логично и понятно, но когда собираюсь делать сам, не получается. Еще раз спасибо. Интересно а если делать с последовательным появлением дочерних дивов, код тоже полностью поменяется?.

@voraa · 20.08.2024, 12:51

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

Интересно а если делать с последовательным появлением дочерних дивов, код тоже полностью поменяется?.

Ну это довольно абстрактный вопрос. Надо же знать, какие именно дочерние, как они должны появляться...
В принципе здесь используется псевдомассив (NodeList) divs. Что в нем находится, то и появляется. Измениться может css.
А как вы найдете

JavaScript
1
divs = document.querySelectorAll('какой то селектор')

то и будет появляться.
Можно использовать и обычный массив и напихать в него что угодно.

@YuriiM · 20.08.2024, 16:45 **[ТС]**

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

JavaScript
1
const divs = document.querySelectorAll('div, p');

@voraa · 20.08.2024, 17:16

Я же без разметки html и css не знаю, как они расположены и какие стили им заданы.
И тем более не могу понять, чего именно вы хотите? Какие элементы и в каком порядке должны появляться?
Вот есть кусок

HTML5
1
2
3
4
5
6
7
    <div class="zagolovok">
        <p>Пример выполнения задания</p>
    </div>
    <div class="content">
        <div class="malikovIvan" style="margin:0 auto;">Маликов Иван </div>        
    </div>
    <div class="img0"><img src="imade/1.png" style="height: 140px; width:20px; "></div>

Что видно/не видно в начале и в какой последовательности все это должно появляться?

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

Как последовательно вывести все <div> с html страницы с помощью плавного появления изменяя opacity

Решение

Решение

@voraa 1238 / 1133 / 178 Регистрация: 21.01.2024 Сообщений: 5,148
	09.08.2024, 17:28
	Какие именно дивы? Все-Все? Т.е сначала плавно появится div с классом zagolovok, потом div с классом content, потом внутри его div с классом malikovIvan И так далее. Сначала появляется внешний div, потом внутри его появляются внутренние ? Зачем у div классы img0, img1, img2, img3? Они имеют разное оформление? 0

@kidASM 409 / 301 / 112 Регистрация: 28.08.2013 Сообщений: 787
	09.08.2024, 21:25
	Появление или скрытие - это внешний вид (т.е. видит ли пользователь элемент). За внешний вид отвечает CSS. Почитай про такие свойства как "opacity" и "transition". Да и в целом про CSS анимацию. 0

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	12.08.2024, 08:43 [ТС]
	Извините voraa за долгий ответ, имеется ввиду все дивы последовательно, все родительские и дочерние, с "opacity" и "transition" я разобрался, но теперь не понимаю как из дивов в ДОМ, создать массив, или есть какие-то другие методы перебора и вывода. Img это разные рисунки и должны появляться тоже последовательно. Спасибо за любую помощь. 0

@voraa 1238 / 1133 / 178 Регистрация: 21.01.2024 Сообщений: 5,148
	16.08.2024, 13:03
	Где вызов той функции, которая после await? После await должен быть промис. В вашем случае вызов функции, которая вернет промис. 0

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	16.08.2024, 17:26 [ТС]
	Перечитал много, но не смог разобраться, может подскажете код для моего случая. Извините, я только разбираюсь с практической стороной javascript. 0

@YuriiM 0 / 0 / 0 Регистрация: 07.11.2023 Сообщений: 29
	20.08.2024, 10:48 [ТС]
	Спасибо voraa, все работает, я все еще работаю методом проб и ошибок, поэтому продвигаюсь очень медленно, хотя когда вижу ваш код, все логично и понятно, но когда собираюсь делать сам, не получается. Еще раз спасибо. Интересно а если делать с последовательным появлением дочерних дивов, код тоже полностью поменяется?. 0