Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Анимация для ширины (https://javascript.ru/forum/dom-window/84931-animaciya-dlya-shiriny.html)

ureech 07.02.2023 12:11
Анимация для ширины
 
Привет.
this.container = $('.container');
 this.addPanel = function () {
container.width(container.width() - 250)
}


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

рони 07.02.2023 12:21
Цитата:
Сообщение от ureech
css не катит
почему?

рони 07.02.2023 12:30
css animate
 
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>

рони 07.02.2023 12:32
jquery animate
 
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 07.02.2023 13:57
Цитата:
Сообщение от рони
почему?
Потому что придётся переписать слишком много стилей. И всё равно под все разрешения не сделаешь качественно. А так при любом раскладе будет работать. Да и js мне больше нравится)
Спасибо за помощь).


Часовой пояс GMT +3, время: 21:40.