Форум

ureech · #1 (**permalink**) 07.02.2023, 12:11

Привет.

this.container = $('.container');
 this.addPanel = function () {
container.width(container.width() - 250)
}

Подскажите как мне сделать плавным изменение ширины? То есть как применить тут анимацию? css не катит).

рони · #2 (**permalink**) 07.02.2023, 12:21

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

css не катит

почему?

рони · #3 (**permalink**) 07.02.2023, 12:30

ureech,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container {
            width: 500px;
            height: 15px;
            background-color: #008000;
            transition: width 2.6s ease;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            let container = $('.container');
            const addPanel = function() {
                container.width(container.width() - 250)
            }
            window.setTimeout(() => addPanel(), 300)
        });
    </script>
</head>

<body>
    <div class="container"></div>
</body>

</html>

рони · #4 (**permalink**) 07.02.2023, 12:32

ureech,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container {
            width: 500px;
            height: 15px;
            background-color: #008000;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function() {
            let container = $('.container');
            const addPanel = function() {
                container.animate({'width' : container.width() - 250}, 2600)
            }
            window.setTimeout(() => addPanel(), 300)
        });
    </script>
</head>

<body>
    <div class="container"></div>
</body>

</html>

ureech · #5 (**permalink**) 07.02.2023, 13:57

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

почему?

Потому что придётся переписать слишком много стилей. И всё равно под все разрешения не сделаешь качественно. А так при любом раскладе будет работать. Да и js мне больше нравится)
Спасибо за помощь).

Форум

Справочник

Discord чат

Курсы javascript