jQuery 学习笔记之 动画与特效

显示与隐藏

show()与hide()方法

show()是显示页面中的元素，等同于jQuery代码： $("#p1").css("display","block");

hide()是隐藏页面中的元素，等同于下列jQuery代码： $("#p1").css("display","none");

show()与hide()方法还可以完成有动画效果的显示与隐藏，只需要在方法的括号中加入相应的参数即可，其调用语法格式：

show(speed,[callback])

hide(speed,[callback])

方法中的参数speed表示执行动画时的速度，该速度有3个默认字符值“slow”，“normal”，“fast”，其对应的速度分别是“0.6秒”，“0.4秒”，“0.2秒”；如果不使用默认的字符值，也可以直接写入数字。可选参数[callback]为在动画完成时执行的回调函数，该函数每个元素执行一次。

toggle()方法

该方法的功能就是切换元素的可见状态，即如果是显示状态，则变成隐藏状态；如果是隐藏状态，则变成显示状态。该方法有三种调用的形式：

形式一，无参数调用格式： toggle()

形式二，逻辑参数调用格式：   toggle(switch）

参数switch为一个布尔值，即true或false。当该值为true时，显示元素；否则隐藏元素。

形式三，动画效果调用格式： toggle(speed,[callback])

方法中的参数speed表示执行动画时的速度，该速度有3个默认字符值“slow”，“normal”，“fast”，其对应的速度分别是“0.6秒”，“0.4秒”，“0.2秒”；如果不使用默认的字符值，也可以直接写入数字。可选参数[callback]为在动画完成时执行的回调函数，该函数每个元素执行一次。

无论是show()和hide()还是toggle()方法，当以动画效果切换页面元素可见状态时，其元素的width、height、padding和margin属性都将以动画的效果显示。

滑动

slideDown()与slideUp()方法

要实现元素的滑动效果，需要调用jQuery中的两个方法，一个是slideDown(),另一个是slideUp().

slideDown()方法的格式： slideDown(speed,[callback])

其功能是以动画的效果将所选择的元素的高度向下增大，使其呈现一种“滑动”的效果，而元素的其他属性并不发生变化；参数speed为动画显示的速度，可选项[callback]为动画显示完成后，执行的回调函数。

slideIUp()方法的格式： slideUp(speed,[callback])

其功能是以动画的效果将所选择元素的高度向上减小，同样也是仅改变高度属性.参数speed为动画显示的速度，可选项[callback]为动画显示完成后，执行的回调函数。

slideToggle()方法

在jQuery中，通过slideToggle()方法，无需定义变量，该方法可以根据当前元素的显示状态，自动进行切换，其调用的语法格式：

slideToggle(speed,[callback])

该方法的功能是以动画的效果切换所选择元素的高度，即：如果高，则减小；如果低，则增大。同时，在每次执行动画完成后，可执行一个用于回调的函数。

淡入淡出

fadeIn()与fadeOut()方法

show()和hide()方法与fadeIn()和fadeOut()方法相比较，相同之处是都切换元素的显示状态，不同之处在于，前者的动画效果使用元素的width与height属性都发生变化，而后者仅是改变元素的透明度，并不修改其他属性。

fadeIn()方法的格式： fadeIn(speed,[callback])

该方法的功能是通过改变所选元素的透明度，实现淡入的动画效果，并完成时，可执行一个回调的函数。参数speed为动画效果的速度，可选参数[callback]为动画完成时执行的函数。

fadeOut()方法的格式： fadeOut(speed,[callback])

该方法的功能是通过改变所选元素透明度，实现淡出的动画效果，并完成时，可执行一个回调的函数。参数speed为动画效果的速度，可选参数[callback]为动画完成时执行的函数。

fadeTo()方法

fadeTo(speed,opacity,[callback])

该方法的功能是将所选则元素的不透明度以动画的效果调整到指定的不透明度值，动画完成时，可以执行一个回调函数，参数speed为动画效果的速度，参数opacity为指定的不透明值，取值范围是0.0~1.0，可选参数[callback]为动画完成时执行的函数。

自定义动画

简单的动画

animate(params,[duration],[easing],[callback])

其中，参数params表示用于制作动画效果的属性样式和值的集合。可选参数[duration]表示三种默认的速度字符“slow”，“normal”，“fast”或自定义的数字。可选项[easing]为动画插件使用，用于控制动画的表现效果，通常“linear”和“swing“字符值。可选项[callback]为动画完成后，执行到回调函数。

移动位置的动画

animate()不仅可以用动画效果增加元素的长与宽，还能以动画效果移动页面中的元素，即改变其相对位置。例如将方法中的参数params，加入下代码：

$("p").animate({

left: "20px",

top:"70px"

},3000)

这段代码执行后，页面中的<p>元素，在3000毫秒内，其相对应的位置以动画的效果向右移动20像素、向下移动70像素。除上述方式移动元素位置外，还可以根据元素当前的位置进行累加或累减的移动。

队列中的动画

所谓”队列“动画，是指在元素中执行一个以上的多个动画效果，即有多个animate()方法在元素中执行，根据animate()方法执行的先后顺序，形成动画”队列“，产生”队列“后，动画的效果便按”队列“的顺序进行展示。

动画停止和延时

stop()方法的格式：

stop([clearQueue],[gotoEnd])

该方法的功能是停止所选元素中正在执行的动画，其中可选参数[clearQueue]是一个布尔值，表示是否停止正在执行的动画。另一个可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画。

delay()方法的格式：

delay(duration,[queueName])

该方法的功能是设置一个延时值来推迟后续队列中的动画的执行，其中参数duration为延时的时间值，单位是毫秒。可选参数[queueName]表示队列名词，即动画队列。