通过一段代码来展示jQuery的动画效果。

1.show&hide

html代码部分：

     
    
      
什么是jQuery?
    
      
               jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。    
      
     

toggle()

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

 

2.show&hide带时间，可以加入一个时间参数

3.fadeOut&fadeIn 注意大小写，javascript是区分大小写的。

fadeOut()通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

fadeIn()通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

 

4.slideUp&slideDown

slideUp()通过高度变化（向上减小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

5.animate简单应用

点击panel，会向右移动500px，时间为3秒钟。这其实是动态的调整它的位置。这要结合css来实现。因为只有position设为了relative，left属性才会有效。

6.animate多重动画

这段代码的意思，是使panel向右移动的同时，高度变为200px。这里用了两个参数。

这段代码与上面有所不同，它不是同时变化的，它是由先后顺序的，先是panel向右移动500px，然后高度变为200px。

这段代码更为复杂一点。先是通过css方法设置panel的透明度为0.5，也就是半透明。然后是先让panel向右移动400px，高度变为200px，透明度变为1，也就是不透明。然后再向下移动200px，宽度变为200px，最后慢慢的淡出。fadeOut("slow")就是淡出的意思。这里的参数可以是数字表时间，也可以是字符串‘slow’，‘fast’表快慢。

 

这段代码最后有一段css效果。它并不是最后执行的。也就是它并没有排队，从一开始就是border为5px solid blue的效果。可以调整代码如下：

animate(params,[speed],[easing],[fn])。animate最后一个参数是一个函数，它表示等动画执行完毕执行的动作。在这个函数中，设置css就可以实现css的最后执行。

7.stop

stop() 方法停止当前正在运行的动画。

这段代码表示当鼠标浮于panel之上时，会让高度和宽度变大。当鼠标离开后，高度宽度变小。如果鼠标快速的移动移出就会有一个问题。就是它会一遍一遍的执行动作，直到动作完成。有一定的滞后效应。如何避免这一滞后效应呢？

我们可以通过stop() 方法。代码如下：

也就是在执行动作之前，先结束上一个动作，这样就能避免快速移动移出后的滞后效果。

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

8.还有一些连在一起的动作。

toggle()切换消失与出现

slideToggle()切换上下帘效果

fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

9.animate方法模仿各种效果。