点击按钮控制盒子伸缩（animate（）方法）

最新推荐文章于 2022-06-30 20:42:32 发布

酷到无边99

最新推荐文章于 2022-06-30 20:42:32 发布

阅读量712

点赞数 1

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_47697572/article/details/123247303

版权

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。

HTML

<div id="app">
        <div class="x-left">
            <button type="button" style="margin-left: 285px;" id="sh" class="layui-btn layui-btn-primary layui-btn-sm">
                <i class="layui-icon">&#xe654;</i>
            </button>
        </div>
        <div class="x-right">

            
        </div>
    </div>

JavaScript

 <script>
        let $ = layui.$;
        let default_sign = true;
        $('#sh').on('click', function () {
            let left = {left: '-285px'}
            let right = {left: '85px',width: '95%' };
            if (default_sign) {
                default_sign = false;
            }else{
                left.left = '20px';
                right.left = '22%';
                right.width = '78%';
                default_sign = true;
            }
            $('.x-right').stop().animate(right);
            $('.x-left').stop().animate(left);

        })

    </script>

这里的stop()方法为停止当前被选元素正在运行的动画。