二零二三年 优质公开课animate方法.pptx

animate() 方法北京电子科技职业学院 animate方法简介一animate第一种形式二animate第二种形式三目录Contents animate方法简介1 animate方法简介animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 margin:30px）。字符串值无法创建动画（比如 background-color:red）。注释：使用 “+=” 或 “-=” 来创建相对动画。 animate第一种形式2 含义animate方法提供给了开发者很大的自定义空间，它一共有两种形式。第一种形式语法$(selector).animate(styles,speed,easing,callback)animate第一种形式 animate第一种形式参数解析：styles：必需。规定产生动画效果的 CSS 样式和值。可能的 CSS 样式值：backgroundPosition、borderWidth、borderBottomWidth、borderLeftWidth、borderRightWidth、borderTopWidth、borderSpacing、margin、marginBottom、marginLeft、marginRight、marginTop、outlineWidth、padding、paddingBottom、paddingLeft、paddingRight、paddingTop、height、width、maxHeight、maxWidth、minHeight、minWidth、font、fontSize、bottom、left、right、top、letterSpacing、wordSpacing、lineHeight、textIndent animate第一种形式参数解析：speed:可选。规定动画的速度。默认是 normal。可能的值：毫秒 （比如 1500）、“slow”、“normal”、“fast”。easing:可选。规定在不同的动画点中设置动画速度的 easing参数。jQuery中提供了linear和swing两个值。callback:可选。animate 函数执行完之后，要执行的函数。 animate第一种形式在第一种形式中：$(selector).animate(styles,speed,easing,callback)只有定义动画终止样式属性的时候使用大括号{}，后面比如动画速度、回调函数等等都是裸露的，他们之间都是用逗号间隔。需要注意以下几点：1.如果尺寸没有单位，那么默认单位是px。2.属性值需要用双引号包裹，如果属性值是数字的话可以省略。 改变 div 元素的高度：div id=box/divbutton class=btn1Animate/buttonbutton class=btn2Reset/button$(document).ready(function() { $(.btn1).click(function(){ $(#box).animate({height:300px}); }); $(.btn2).click(function(){ $(#box).animate({height:100px}); });});animate第一种形式 animate第二种形式3 animate第二种形式基本语法：$(selector).animate(styles,options)参数解析：styles：必需。规定产生动画效果的 CSS 样式和值，同上面第一种形式一样。options:可选。规定动画的额外选项。 animate第二种形式可能的值：speed - 设置动画的速度easing - 规定要使用的 easing 参数callback - 规定动画完成之后要执行的函数step - 规定动画的每一步完成之后要执行的函数queue - 布尔值。表示当有多个animate组成的jQuery链时，当前animate与紧接着的下一个animate是按顺序执行（true）还是同时触发（false）。specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 参数 动画队列$(document).ready(function(){ $(#btn1).click(function(){ $(“div).animate({width:1000px},{queue:false}) .animate({fontSize:“30px},10