jQuery 动画篇

1、动画基础隐藏和显示（show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置）

（1）隐藏元素的hide方法

快捷参数：

.hide("fast / slow") 'fast' 和 'slow' 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

（2）显示元素的hide方法

（3）显示与隐藏切换toggle方法

2、上卷下拉效果

（1）下拉动画slideDown  （      slideDown(fast)       slideDown(slow)           ）

基本操作：$("ele").slideDown()

执行回调：$("ele").slideDown(1000, function() { //等待动画执行1秒后,执行别的动作.... });

（2）上卷动画slideUp（用法同slideDown一样）

（3）上卷下拉切换slideToggle

3、淡入淡出效果（淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，变化的区间要么是0，要么是1）

（1）淡出动画fadeOut（fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果）

• .fadeOut("slow / fast");   /  .fadeOut(1000);   / .fadeOut(1000,"linear"); （这里的linear是指动画的行进速度方法（easing），顾名思义就是淡出的速度保持恒定的线性速度。而jQuery 核心默认的easing为swing,行进速度在动画开始和结束时比在动画中间时稍慢。）

• .fadeOut(2000, function () { });

• .fadeOut( { duration: 1000 });

（2）淡入动画fadeIn（fadeIn()函数用于显示所有匹配的元素，并带有淡入的过渡动画效果）

（用法与fadeOut一致）

（3）淡入淡出切换fadeToggle（fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果）

（4）淡入效果fadeTo（让元素保持动画效果，执行opacity  不为0或1时的效果）

4、动画切换的比较

toggle与slideToggle和fadeToggle的比较

（1）toggle、sildeToggle以及fadeToggle的区别：

• toggle：切换显示与隐藏效果

• sildeToggle：切换上下拉卷滚效果

• fadeToggle：切换淡入淡出效果

（2）操作元素的显示和隐藏可以有几种方法。例如：

• 改变样式display为none

• 设置位置高度为0

• 设置透明度为0

（3）toggle与slideToggle细节区别：

• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

5、自定义动画

（1）动画animate

a、所有用于动画的属性必须是数字的，除非另有说明；

b、注意属性值的单位

c、每个属性能使用'show', 'hide', 和 'toggle'

d、提供一个以 += 或 -= 开始的值

e、CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

f、options参数

• duration - 设置动画执行的时间

• easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数

• step：规定每个动画的每一步完成之后要执行的函数

• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念

• complete：动画完成回调

（2）停止动画stop

a、stop的几个函数

• .stop();  停止当前动画，点击在暂停处继续开始

• .stop(true); 如果同一元素调用多个动画方法，当调用.stop()的时候，队列中的下一个动画立即开始。

• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

6、jQuery核心

（1）each方法的应用

• 来处理对象和数组的遍历（回调函数中传入的两个参数，如果遍历的是数组，第一个参数是索引值，第二个参数是数组的值；如果遍历是对象，第一个参数是属性，第二个参数是属性值。）

• jQuery.each ( array, callback )            （jQuery.each == $.each）
  

• jQuery.each ( object, callback )

（2）查找数组中的索引inArray（用于在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1。）

• jQuery.inArray ( value, array , [ fromIndex ] )

• 如果要判断数组中是否存在指定值，你需要通过该函数的返回值不等于（或大于）-1 来判断

（3）去空格神器trim方法（jQuery.trim()函数用于去除字符串两端的空白字符）

（4）DOM元素的get方法

• get方法是获取的dom对象，也就是通过document.getElementById获取的对象

• get方法是从0开始索引（所以第二个a元素的查找： $(a).get(1)）

• get方法还可以从后往前索引，传递一个负索引值，注意的负值的索引起始值是-1

（5）DOM元素的index方法

• 如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置

• 通过传递dom查找      $(" li ").index(document.getElementById(" test5 ")

• 通过传递jQuery对象查找  $(" li ").index($(" #test5 "))