jQuery基本动画函数

1. 使用基本动画函数

基本的动画函数主要分为show，hide和toggle三个，都提供了无参数的版本，表示不适用动画切换元素的显示状态：

$("#divPop").show(); $("#divPop").hide(); $("#divPop").toggle();

提供了两个参数的重载,因为回调函数可以省略,所以可以像开篇实例中使用的, 传入一个数值作为唯一参数,则会在参数规定的时间内用动画效果显示/隐藏元素:

$("#divPop").show(200); $("#divPop").hide("fast"); $("#divPop").toggle("slow");

如果传递了 200, 表示图层会在 200 毫秒内通过渐变的形式显示出来. speed 参数可以使用三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000).

三个函数都可以传入回调函数callback,签名如下:

function callback() { this; // dom element}

在回调函数中的 this 是执行此函数的 DOM 对象. 会在动画结束时执行。

2. 使用 toggle 函数

toggle函数是功能更强大的函数,可以切换元素的可见状态.我们经常遇到需要使用toggle的情况.比如希望一段文字第一次单击显示弹出层,第二次单击隐藏弹出层.

注意: toggle()这个方法在 jQuery1.8 中宣告过时，在 jQuery1.9 中已经移除；jQuery animation也有一个名为toggle的方法。哪一个被调用取决于传递的参数的设置。

我们将开篇实例稍作修改即可实现这个效果:

      
 
 Display the text prompt 
  
 
pop div