jQuery的动画 — 课程介绍
1、动画DOM以及css操作
2、自定义动画
3、动画函数 — 讲解jQuery自带的动画函数
4、计时器
1、动画DOM以及css操作
(1) 原理我们只需要以固定的时间间隔(例如0.1秒),每次DOM元素的css样式修改一点(例如:高度宽度增加10%),看起来就是动画的效果
2、自定义动画 — animate() — 可以实现任意动画效果,需要传递的参数是DOM元素最终的css状态和时间
(1) 例如:var div = $(‘#div’);
(2) div.animate({opacity:0.25,width:’256px’,height:’256px’},3000);
(3) 第一个参数:属性变化的对象
(4) 第二个参数:动画执行的时间毫秒数
(5) 遇到快读切换的时候,鼠标移动和图片切换不一致 调用animate()之前
(6) —————————————————————————————————————————————————
(7) 调用stop()函数 — 先结束当前的动画,然后再继续执行下一个动画
(8) —————————————————————————————————————————————————-
(9) delay() — 可以实现动画暂停
3、动画函数
(1) Show()/hide() — 直接以无参形式调用show()和hide() ,会显示和隐藏dom元素,但是只传递一个参数进去,就变成了动画
① 参数可以添加毫秒值
② Fast slow参数值
(2) toggle() — 表示show和hide合起来的函数 — 根据当前状态决定是show还是hide
(3) ———————————————————————————————————————————————————
(4) fadeIn()和fadeout() — 动画的淡入淡出,也是不断设置DOM元素的opacity属性来实现的
(5) fadeToggle() — 根据元素是否可见来决定下一步动作
(6) 总结:
① Show和hide会控制宽高和透明渡
② Fade不控制宽度,只控制透明渡
(7) ————————————————————————————————————————————————————-
(8) slideUp和slideDown函数 — 在垂直方向逐渐展开和收缩 — 只控制高度、透明渡,但是宽度不控制
(9) slideToggle() — 根据元素是否可见来进行下一步动作
(10) ————————————————————————————————————————————————————-
(11) 计时器建议记住原生JavaScript的计时器方法 — 参照轮播图案例