jQuery动画基础 学习打卡

思维导图

动画DOM以及css操作

原理我们只需要以固定的时间间隔(例如0.1秒)，每次DOM元素的css样式修改一点(例如：高度宽度增加10%)，看起来就是动画的效果

自定义动画

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() – 可以实现动画暂停

动画函数

(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的计时器方法 – 参照轮播图案例