精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
精通
英语
和
开源
，
擅长
开发
与
培训
，
胸怀四海
第一信赖
挡在.show()或.hide()中指定速度（或更准确地说，一个时长）参数时，就会产生动画效果，即效果会在一个特定的时间段内发生。例如.hide('speed')方法，会同时减少元素的高度、宽度和不透明度，直至这3个属性的值都达到0，与此同时会为该元素应用CSS规则display:none。而.show('speed')方法则会从上到下增大元素的高度，从左到右增大元素的宽度，同时从0到1增加元素的不透明度，直至其内容完全可见。
对于JQuery提供的任何效果，都可以指定3种预设的速度参数：'slow'、'normal'和'fast'。使用.show('show')会在0.6秒内完成效果，.show('normal')是0.4秒，而.show('fast')则是0.2秒。要指定更准确的速度，可以使用毫秒数值，例如.show(850)。注意。与字符串表示的速度参数不同，数值不需要使用引号。
下面，我们就为《林肯盖提斯堡演说辞》（Lincoln's Gettysburg Address）的第2段指定显示速度，如代码清单4-8所示。
代码清单4-8
$( document ). ready ( function( ) {
$( 'p' ). eq( 1 ). hide( );
$( 'a. more' ). click( function ( ){
$( 'p' ). eq( 1 ). show( 'slow' );
$( this ). hide( );
return false;
});
});
当我们在效果大约完成一半时捕获段落的外观时，会看到类似图4-1所示的结果。
虽然使用.show()和.hide()方法在某种程度上可以创造漂亮的效果，但其效果有时候也可能会显得过于花哨。考虑到这一点，JQuery也提供了两个更为精细的内置动画方法。如果想在显示整个段落时，只是逐渐地增大其不透明度，那么可以使用.function('slow')方法。
代码清单如下
$( document ). ready ( function( ) {
$( 'p' ). eq( 1 ). hide( );
$( 'a. more' ). click( function ( ){
$( 'p' ). eq( 1 ). fadeIn( 'slow' );
$( this ). hide( );
return false;
});
});
对于本来就处于文档流之外的元素，比较适合使用淡入和淡出动画。例如，对于那些覆盖在页面之上的“亮盒”元素来说，采用淡入和淡出就显得很自然。不过，假如某个元素本来就处在文档流中，那再调用.fadeIn()就会导致文档“跳一下”，以便为新元素腾出地方来。但这种跳跃感在用户眼里就不怎么美观了。
此时，使用JQuery的.slideDown()和.slideUp()方法通常是正确的选择。这两个动画方法仅改变元素的高度。要让段落以垂直滑落的效果出现，可以像代码清单4-2这样调用.slideDown('slow')。
代码清单4-2
$( document ). ready ( function( ) {
$( 'p' ). eq( 1 ). hide( );
$( 'a. more' ). click( function ( ){
$( 'p' ). eq( 1 ). slideDown( 'slow' );
$( this ). hide( );
return false;
});
});
有时候，我们需要切换某些元素的可见性，要实现切换，可以先检查匹配元素的可见性，然后再添加适当的方法。在此，仍然以淡入淡出效果为例，可以把示例脚本修改为如代码清单4-3所示。
$( document ). ready ( function( ) {
var $firstPara=$( 'p' ). eq( 1 );
$firstPara. hide( );
$( 'a. more' ). click( function ( ){
if ($firstPara. is( ':hidden' )){
$firstPara. fadeIn( 'slow' );
$( this ). text( 'read less' );
}else{
$firstPara. fadeOut( 'slow' );
$( this ). text( 'read more' );
}
return false;
});
});
与我们在本章前面所做的一样，首先缓存选择符以避免重复遍历DOM。而且，这里也不再隐藏被单击的链接，而是修改它的文本。
使用if else语句切换元素的可见性是非常自然的方式。但通过JQuery实现复合效果，却不一定非要使用这个条件语句（尽管在这个例子中，需要条件语句来修改链接的文本）。JQuery提供了一个.toggle()方法，该方法的作用类似于.show()和.hide()方法，而且与它们一样的是，.toggle()方法速度参数也是可选的。另一个复合方法是.slideToggle()，该方法通过逐渐增加或减少元素高度来显示或隐藏元素。代码4-3是使用.slideToggle()方法的脚本。
$( document ). ready ( function( ) {
var $firstPara=$( 'p' ). eq( 1 );
$firstPara. hide( );
$( 'a. more' ). click( function ( ){
$firstPara. slideToggle( 'slow' );
var $link=$( this );
if ( $link. text( )=='read more'){
$link. text('read less');
}else{
$link. text('read more');
}
return false;
});
});
为不重复$(this)，我们把它保存在了$link变量中。同样，条件语句检查的是链接的文本而非第二个段落的可见性，因为我们只利用它来修改文本。