Урок 16. jQuery. Зацикленная анимация

Картинка1
Картинка2
Картинка6

Наведи на картинку

Картинка7

Нажми один раз - скрыть;
два раза - показать

Картинка2
Картинка2
Картинка2
    
------------------------------------------------------------------------------------------------------------------------
HTML КОД:
        
<!doctype html<
<html lang="en"<
<head<
    <meta charset="UTF-8"<
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"<
    <meta http-equiv="X-UA-Compatible" content="ie=edge"<
    <title<Урок 16. jQuery. Зацикленная анимация</title<
</head<
<body<
    <header<</header<
    <main<
        <h1<Урок 16. jQuery. Зацикленная анимация</h1<
        <div<
            <div style="display: flex; gap: 50px; border: #483D8B solid 5px; padding: 10px;"<
                <div<
                    <div class="div1" style="display: flex; flex-direction: column; gap: 5px"<
                        <img src="img/img.png" alt="Картинка1" width="200"<<br<
                     </div<
                    <button class="button1" style="padding: 10px; margin-top: 10px;"<Заменить на новый код</button<
                </div<
                <div<
                    <div class="div2" style="display: flex; flex-direction: column; gap: 5px"<
                        <img src="img/img2.png" alt="Картинка2" width="200"<<br<
                     </div<
                    <button class="button2" style="padding: 10px; margin-top: 65px; margin-left: 25px;" <Сделать прозрачным</button<
                </div<
                <div<
                    <div class="div6" style="display: flex; flex-direction: column; gap: 5px"<
                        <img src="img/img6.png" alt="Картинка6" width="200"<<br<
                     </div<
                    <p style="margin-top: 65px; margin-left: 25px;"<Наведи на картинку</p<
                </div<
                <div<
                    <div class="div7" style="display: flex; flex-direction: column; gap: 5px"<
                        <img src="img/img7.jpg" alt="Картинка7" width="200"<<br<
                     </div<
                    <p style="margin-top: 65px; margin-left: 25px; font-size: 12px; text-align: center"<Нажми один раз - скрыть;<br<два раза - показать</p<
                </div<
                <button class="button7" style="padding: 10px; margin-top: 5px; margin-left: 5px;" <1-ый вариант<br<Скрыть<br<Показать</button<
                <button class="button8" style="padding: 10px; margin-top: 5px; margin-left: 5px;" <2-ой вариант<br<Скрыть<br<Показать</button<
            </div<
        </div<
        <div style="border: #87CEEB solid 5px; padding: 10px;"<
            <div class="div3"<
                <img src="img/img3.png" alt="Картинка2" width="200"<<br<
            </div<
            <div<
                <button class="button3" style="padding: 10px; margin-top: 65px; margin-left: 10px;"<Начать движение</button<
            </div<
        </div<
        <div style="border: #ec4963 solid 5px; padding: 10px;"<
            <div class="div4"<
                <img src="img/img4.webp" alt="Картинка2" width="200"<<br<
            </div<
            <div<
                <button class="button4" style="padding: 10px; margin-top: 65px; margin-left: 10px;"<Начать движение</button<
            </div<
        </div<
        <div style="border: cornflowerblue solid 5px; padding: 10px;"<
            <div<
                <button class="button5" style="padding: 10px; margin-top: 10px; margin-bottom: 20px;  margin-left: 10px;"<Начать движение</button<
            </div<
            <div class="div5"<
                <img src="img/img5.png" alt="Картинка2" width="200"<<br<
            </div<
        </div<
    </main<
    <footer<</footer<
    <script src="../l15-JS_jQuery_знакомство/jquery-4.0.0.js.js"<</script<
    <script src="js/index.js"<</script<
</body<
</html<

------------------------------------------------------------------------------------------------------------------------
JS КОД

$(function () {
    $('.button1').click(
        function () {
            let i = $('.div1')
            console.log(i.html()); // Выводит html код
            i.html('<b>new text</b> <h2>Привет</h2> <span style="margin-bottom: 130px">Привет! МИР!</span>');  // Заменяет код на странице
            console.log(i.html()); // Выводит новый код html
        }
    )
});

$(function () {
    $('.button2').click(
        function () {
            $('.div2').fadeTo(4000, 0.3).fadeTo(1000, 1);
        }
    )
});

$(function () {
    $('.button3').click(
        function () {
            $('.div3').
            animate({opacity: 0.4, marginLeft: '70%', marginRight: '30%' }, 5000).
            animate({opacity: 1, marginLeft: '0%'}, 5000, arguments.callee);
        }
    )
});

$(function () {
    $('.button4').click(
        function start() {
            $('.div4').
            animate({opacity: 0.2, marginLeft: '30%'},2000).
            animate({opacity: 1, marginLeft: '0%'}, 5000, start)
        }
    )
});

$(function () {
    $('.button5').click(
        function start() {
            $('.div5').
            animate({opacity: 0.4, marginLeft: '11%'}, 2000).
            animate({opacity: 1, marginTop: '11%'}, 2000).
            animate({opacity: 0.4, marginLeft: '0%'}, 2000).
            animate({opacity: 1, marginTop: '0%'}, 2000, start);
        }
    )
});

$(function () {
    $('.div6').mouseover(function () {
        $(this).hide(1000);
    }).mouseout(function () {
        $(this).show(1000);
    });
});

// 1 способ:
$(function () {
    $('.button7').
    click(function () {
         $('.div7').hide()}).
    dblclick(function () {
         $('.div7').show()
    })
});

// 2 способ
let flag = true;
$(function () {
    jQuery('.button8').
    click(function AddDelete() {
        if (flag) {
            $('.div7').hide();
        }
        else {
            $('.div7').show();
        }
        flag = !flag;
    })
});