jQuery中,animate的定义是animate(params,[speed],[easing],[fn])
,参数的含义如下:
- params:一组包含作为动画属性和终值的样式属性和及其值的集合
- speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:要使用的过渡效果的名称(时间曲线)(需要插件支持).默认jQuery提供"linear" 和 “swing”.
- fn:在动画完成时执行的函数,每个元素执行一次。
其它的我们通过参数含义可以很清楚的得知,这里要说的其实就一个。
不知道你有没有注意到:fn:在动画完成时执行的函数,每个元素执行一次
中的每个元素执行一次。也就是说如果你在执行动画的时候是绑定了多个元素的,那么回调函数就会执行几次,如果没有注意这一点,可能会导致出现意料之外的Bug。
下面我们举一个例子:
要求是,有 8 个球并列排在一起,先让它们的 margin-left 变为 30px,然后向下移动 50px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>animation</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<style type="text/css">