toggle、sildeToggle和fadeToggle的区别和自定义动画.animate()
1 操作元素显示和隐藏的常见的4种方法 改变样式display为none 设置位置高度为0 设置透明度为0 还有show/hide、sildeDown/sildeUp、fadeIn/fadeOut、toggle、sildeToggle和fadeToggle切换方法2 toggle、sildeToggle和fadeToggle的区别
toggle切换显示与隐藏效果,动态效果为从右至左,横向动作,通过display来判断切换所有匹配元素的可见性
sildeToggle切换上下拉卷滚效果,动态效果从下至上,竖向动作, 通过高度变化来切换所有匹配元素的可见性
fadeToggle切换淡入淡出效果3 .animate()可以精确的控制样式属性从而执行动画,允许在任意的数值的CSS属性上创建动画
4 常见的.animate()语法
.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )传递一个对象参数可以拿到动画执行状态的一些通知
5 options参数
duration设置动画执行的时间
easing规定要使用的easing函数,过渡使用哪种缓动函数
step规定每个动画的每一步完成之后要执行的函数
progress每次动画调用的时候都会执行这个回调,是一个进度的概念
complete动画完成回调
6 如果多个元素执行动画,回调将会在每个匹配的元素上执行一次,不是作为整个动画执行一次
7 唯一必要的属性是一组CSS属性键值对,这组属性和用于设置.css()方法的属性键值对类似,除了属性范围做了更多限制,第二个参数可以单独传递多个实参也可以合并成一个对象传递
8 properties一个或多个css属性的键值对所构成的Object对象,所有用于动画的属性必须是数字的,除非另有说明,如果不是数字将不能使用基本的jQuery功能,比如border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing都是能产生动画效果的,background-color不可以,因为参数是red或者GBG这样的值,非常用插件,正常情况下是不能只用动画效果的
9 CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")
10 属性值的单位像素(px),除非另有说明,单位em 和 %需要指定使用
11 除了定义数值,每个属性能使用'show', 'hide', 和 'toggle',这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
12 提供一个以+= 或 -=开始的值,目标值是以这个属性的当前值加上或者减去给定的数字来计算的
13 动画执行的时间,持续时间是以毫秒为单位的,值越大表示动画执行的越慢,不是越快,还可以提供'fast' 和 'slow'字符串,分别表示持续时间为200 和 600毫秒
14 easing动画运动的算法在jQuery库中默认调用 swing,如果需要其他的动画算法,则查找相关的插件
15 complete回调,动画完成时执行的函数,可以保证当前动画确定完成后发会触发