23、使用jQuery实现动画效果（原理：改变CSS）

一、设置显隐动态效果
CSS支持两种方法显示或隐藏元素，即使用visibility或display属性方法，它们控制元素显示或
隐藏的效果相同，但是结果不同。
1、visibility 属性在隐藏元素时，同时会保持元素在文档的影响力（占据，只是透明了），隐藏后元素
的位置保护不变。该属性包括visible 和 hidden两个值

2、display 属性定义了更强大的可见性控制，为元素控制提供了更丰富的选项。当使用display属性隐藏
元素时(即属性值为none),文档的结构就会发生变化，被隐藏的元素及其子元素就被删除，该元素不再占据
文档位置，后面的元素会向上移动占据被删除元素的位置。

在jQuery中，使用show()元素可以显示元素，使用hide()方法可以隐藏元素。（通过设置display值）

注：如果在初始化时，将style属性的display值设置为none，则调用jQuery的show()方法，会将这个属性声明
清空。如果在初始化时，使用jQuery()的hide()方法隐藏元素，则调用show()方法之后，元素的style
属性声明将显示元素的默认值。

show() 与 hide() 还可以设置参数，
第一个参数是表示动画时间的毫秒数值，也可以设置预定义的字符串 slow normal fast
第二个参数：擦除效果的名称，需要插件支持
第三个参数是动画完成时的回调函数


二、显隐切换
当频繁的使用show和hide方法时，可以使用toggle()方法来代替。
toggle()方法能够切换元素的可见状态。
toggle可以接受多个参数，如果传入true 相当于 show  传入false相当于 hide
同时支持动画持续时间，还有一个回调函数

三、设计滑动动态效果
尺寸、位置、显示和隐藏是网页动画的基础。
动画是一种视觉效果，实际上它就是由于数帧静态画面拼接的连续动作。
使用JavaScript设计动画，主要利用循环结构和时间触发器setTimeout() setInterval()方法。


动画设计的思路：通过循环改变元素的某个CSS样式属性，从而达到动态效果，如移动位置、缩放大小、
渐隐渐显等。为了能够设计更逼真的效果，一般通过高频率小步伐快速修改样式属性值，
让浏览者感觉动画是在持续运动而不是由很多次设置组成。

jQuery提供了简单的滑动方法以及自定义动画函数。

1、滑动显隐效果
slideDown()、slideUp()，它们分别是向下滑动和向上滑动。如果灵活配合这两个函数，可以设计很多奇妙、动感的滑动
效果。
slideDown()用于将已经隐藏的元素缓慢的显示出来（放下）
slideUp()用于将已经显示的元素缓慢的隐藏（拉起）
包含两个可选参数，滑动速度（动画持续毫秒数）、动画完成后的回调函数
原理：设计display的值为none

2、滑动显隐切换效果
slideToggle() 类似toggle()，只不过添加了一些效果
可以接受两个参数：持续时间，回调函数


四、设计渐进动态效果
渐隐和渐显是通过不透明度的变化来实现匹配元素的淡入和淡出效果。与滑动显示和隐藏相比
淡入和淡出动画只调整元素的不透明度。不会修改元素的高和宽。
fadeIn()、fadeOut()、fadeTo()

1、fadeIn() 显示
能够实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

2、fadeOut() 隐藏
与fadeIn()完全相反，它能够实现所有匹配元素的淡出效果。

支持两个参数，持续时间，回调函数

3、fadeTo() 透明度调整
透明度取值范围0-1

第一个参数持续时间，第二个参数不透明度，第三个参数为可选的回调函数
注：fadeTo()方法仅能够用于显示的元素，对于被隐藏的元素来说是无效的。

五、设计自定义动画

对于Web设计来说，动画形式主要包括3种：位置变化、形状变化和显示变化。
位置变化：主要依靠坐标
形状变化：主要依靠高、宽
显示变化：主要通过显示和隐藏属性

jQuery自定义了animate()方法，可以自定义各种形式的动画效果。

1、自定义动画
jQuery的animate()方法的关键就在于指定动画的形式以及动画结果样式属性的对象。
有四个参数：
第一个参数是一级包含作为动画属性和终值的样式属性和及其值的集合。
形式如下：
{
width:90%,
height:90%,
fontSize:"20px",
borderWidth:10
}
所有指定的属性必须采用骆驼命名形式：如marginLeft 而不是margin-left。
如果属性值是一个数值，样式属性会从当前的值渐变到指定的值。如果使用的是 hide show toggle等特定字符串值，
则会为该属性调用默认的动画形式。
第二个参数表示动画持续时间，以毫秒为单位

第三个参数表示要使用的擦除效果名称。这是一个可选参数，要使用该 参数，则需要插件支持。
默认jQuery提供linear和swing特效。

第四个参数表示回调函数，表示在动画演示完毕之后，将要调用的函数。


移动的动画总是以默认动画位置为参照物为基础的。
left:"+100px" 其实就是左边距的设置100px +可加可不加
left:"-100px" 左边距-100px  -必须加。
类似还有+= -=
+= 与 + 的区别 ，+设置边距为正值，+=相对于目前的状态改变多少。

注：animate()中，我们可以把第二个参数及后面的所有参数都放置在一个对象中，在这个集合对象中包含
动画选项的值，然后把这个对象作为第二个参数传递给animate()方法。
该参数包括：
duration:指定动画持续时间
easing:使用的擦除效果名称
complete:指定动画完成时执行的函数
step:动画演示之后回调值
queue：是否使此动画进入动画队列。默认值为true(队列中的动画一个一个执行)





2、停止动画


stop()方法，可以随时停止所有在指定元素上正在进行的动画，包括三个参数
第一个参数是布尔值，是否清空队列：true 清空，立即结束所有动画，后续动画不再执行
  false 不清空，结束运行的动画，运行下一个队列中的动画。
第二个参数是布尔值，true ，让当前正在执行的动画立即完成，并且重设show 和 hide的原始样式
，调用回调函数等。false不执行完成。
第三个参数是布尔值：




3、关闭动画

jQuery.fx.off=true  | false;
关闭动画，不再有动画效果，相当于从初态样式到终态样式直接切换，没有延缓效果。