jQuery效果—animate动画

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

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

没执行动画前的样式

开始动画后效果代码

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

停止动画的代码

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