一下代码均未做浏览器兼容，可能部分浏览器不适用，建议使用谷歌浏览器

 

一.隐藏与显示

1.简单的隐藏效果

        
             
点击消失1
点击消失2

2.另一种隐藏效果

        
                 
     
    
      
这是一句话
    
      点击消失
     

3.将显示和隐藏效果结合在一起

        
             
这是一句话
点击隐藏点击出现

4.语法

$(selector).show(speed,easing,callback)

根据JQuery的参考手册，上面的参数依次是速度（slow，fast，具体的秒数（毫秒为单位）），动画方式（swing（前后慢，开头块），linear（匀速）），回调函数。

5.使用toggle（）实现简洁的出现隐藏效果

        
             
这是一句话
点击隐藏or出现

 

 

二.淡入与淡出

1.fadeIn（）淡入

        
             点击淡入方框
     
     
     

2.fadeOut实现淡出

        
             点击淡入方框
     
     
     

3.fadeToggle()实现淡入淡出

        
             点击淡入方框
     
     
     

4.fadeTo（）实现颜色的改变

        
             点击淡入方框
     
     
     

3.滑动

1.使用slideDown（）实现下滑

        
                 
     
      点击下滑
     
     
      下滑出来的界面
     

2.使用slideUp（）实现上滑

        
                 
     
      点击下滑
     
     
      点击上滑
     

3.使用slideToggle（）实现上下滑动转换

        
                 
     
      点击下滑
     
     
      点击上滑
     

4.动画

1.语法

$(selector).animate({params},speed,callback);

参数分别是形成动画的css的参数值（必须），速度（可选），回调函数（可选）

2.一个简单的实例

        
                 
     
          点击发生变化，右移250px
     

3.稍微复杂的动画

        
                 
     
          点击发生复杂变化
     

4.注意点

几乎可以使用所有的css属性不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从  下载  插件。

 

5.相对值动画（与当前值不同而产生的动画效果）

        
                 
     
          点击发生复杂变化
     

 

6.使用预定义值（toggle，hide，show）

        
                 
     
          点击发生复杂变化
     

 

7.动画队列

        
                 
     
          点击发生复杂变化
     

 

5.停止动画

1.不带参数的stop（）

       停止滑动
     
      点我向下滑动面板
     
     
      Hello world!
     

2.带参数的stop（）方法

$(selector).stop(stopAll,goToEnd);

参数表示：stopAll（停止正在进行的动画，如果有排队的动画，可以执行），goToEnd（结束所有动画，并呈现完成动画静态状态）

 

6.callback函数

1.注意

在动画全部完成之后执行

2.实例

        
             
     
          隐藏之后弹出提示框
     

 

7.Chaining

1.作用

链接动作和方法

2.实例

        
             
     
          隐藏之后弹出提示框