jQuery 动画实现，停止效果

最新推荐文章于 2024-09-29 21:43:16 发布

「已注销」

最新推荐文章于 2024-09-29 21:43:16 发布

阅读量78

点赞数

文章标签： jquery 动画 css

本文链接：https://blog.csdn.net/m0_46813809/article/details/120479017

版权

本文介绍了如何使用JavaScript的animate方法创建CSS属性动画，包括设置动画时长、执行函数等。示例代码展示了如何使一个红色方框在点击按钮后向左移动并改变尺寸。同时，讲解了stop方法的不同参数组合用于停止动画的不同行为，如停止当前动画、清除动画队列等。此内容对于前端开发者掌握动态效果的实现和控制具有指导意义。

摘要由CSDN通过智能技术生成

动画

语法
animate({css属性动画},time,function);

{}里放的是形成动画的css属性。
time规定动画效果的时长。
function是完成动画后执行的函数。

<style>
    .div {
        width: 200px;
        height: 200px;
        background-color: red;
        line-height: 200px;
        text-align: center;
        position: absolute;
    }
</style>

<body>
    <button id="bianhua">点击变化</button>
    <div id="ni" class="div">
        这个盒子向左移动
    </div>
    <script>
        $(function() {
            $('#bianhua').click(function() {
                $("#ni").animate({
                   left: "100px",
                    width: '+=20px',
                    height: '+=45px',
                    fontSize:'+=10px'
                })
            })
        })
    </script>
</body>