基础中动画效果.pdfVIP

利用jQuery实现特效

➢基本动画

➢jQuery中的滑动

➢jQuery中淡入淡出效果

➢jQuery中的自定义动画

5.1:基本动画

show()

显示隐藏的匹配元素。

这个就是show(speed,[callback])无动画的版本。如果选择

的元素是可见的，这个方法将不会改变任何东西。无论这个

元素是通过hide()方法隐藏的还是在CSS里设置了

disy:none;，这个方法都将有效。

返回值

jQuery

示例

显示所有段落

HTML代码:

pstyle=disy:noneo/p

jQuery代码:

$(p).show()

show(speed,[callback])

以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函

数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不。

返回值

jQuery

参数

speed(String,Number):三种预定速度之一的字符串(slow,normal,orfast)

或表示动画时长的毫秒数值(如：1000)

callback(Function):(Optional)在动画完成时执行的函数，每个元素执行一次

。

示例

用缓慢的动画将隐藏的段落显示出来，历时600毫秒。

HTML代码:

pstyle=disy:noneo/p

jQuery代码:

$(p).show(slow);

用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在执行

反馈！

HTML代码:

pstyle=disy:noneo/p

jQuery代码:

$(p).show(fast,function(){

$(this).text(AnimationDone!);

});

将隐藏的段落用将近4秒的时间显示出来。。。并在执行一个反

馈。。。

HTML代码:

pstyle=disy:noneo/p

jQuery代码:

$(p).show(4000,function(){

$(this).text(AnimationDone...);

});

hide()

隐藏显示的元素

这个就是hide(speed,[callback])的无动画版。如果选择

的元素是隐藏的，这个方法将不会改变任何东西。

返回值

jQuery

示例

隐藏所有段落

jQuery代码:

$(p).hide()

hide(speed,[callback])

以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地

触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度

和不。

返回值

jQuery

参数

speed(String,Number):三种预定速度之一的字符串(slow,

normal,orfast)或表示动画时长的毫秒数值(如：1000)

callback(FunctionFunction):(Optional)在动画完成时执行的

函数，每个元素执行一次。

示例

用600毫秒的时间将段落缓慢的隐藏

jQuery代码:

$(p).hide(slow);

用200毫秒将段落迅速隐藏，弹出一个框

。

jQuery代码:

$(p).hide(fast,function(){

alert(AnimationDone.);

});

toggle()

切换元素的可见状态。

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

的。

返回值

jQuery

示例

切换所有段落的可见状态。

HTML代码:

po/ppstyle=disy:noneoAgain/p

jQuery代码: