jQuery效果—animate动画

最新推荐文章于 2025-06-09 14:55:34 发布

原创最新推荐文章于 2025-06-09 14:55:34 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#animate #JavaScript

本文介绍了如何利用jQuery的animate方法创建自定义动画。详细阐述了animate的参数用法，包括CSS属性设置、动画速度和回调函数。还提到了stop方法在动画执行中的作用，如停止动画和清除动画队列。示例中展示了一个绿色正方形的动画效果，通过开始和停止按钮控制动画的执行和中断。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：Visual Studio 2015 — animate
作者：廖亚星
撰写时间：2019年4 月19 日

jQuery animate()方法允许我们创建自定义的动画。
语法： $selector).animate({params},speed,callback); 必需的params参数定义形成动画的CSS属性。可选的speed参数规定效果的时长，它可以取以下值：“slow”、“fast”或毫秒。可选的callback参数是动画完成后所执行的函数名称。 jQuery stop()方法用于在动画执行完成之前，停止动画或效果。语法：$ (selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画，默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面我做了一个绿色的正方形来执行动画效果，并放置了两个按钮用于操作动画
在这里插入图片描述
没执行动画前的样式

开始动画后效果代码

当点击开始动画后，动画会在设定的时间-3000毫秒中执行整个动画效果，正方形会到离左边250px的位置，同时长宽都会增长150px，而且这个动画效果随着点击数量的增长，可以叠加效果。
动画执行后的效果
在这里插入图片描述
停止动画的代码

在动画执行完成之前，点击停止动画按钮，即可马上停止动画