JQuery动画

标签：JQuery动画

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回调，动画完成时执行的函数，可以保证当前动画确定完成后发会触发

JQuery动画

标签：JQuery动画

原文地址：http://blog.51cto.com/lakaodekaola/2082804