第 4 章　样式与动画 - 4.3　效果和时长 - 《jQuery基础教程（第4版）》

4.3　效果和时长

4.3　效果和时长

当在.show()或.hide()中指定时长（或更准确地说，一个速度）参数时，就会产生动画效果，即效果会在一个特定的时间段内发生。例如.hide('duration')方法，会同时减少元素的高度、宽度和不透明度，直至这3个属性的值都达到0，与此同时会为该元素应用CSS规则 display:none。而.show(' duration ')方法则会从上到下增大元素的高度，从左到右增大元素的宽度，同时从0到1增加元素的不透明度，直至其内容完全可见。

4.3.1　指定显示速度

对于jQuery提供的任何效果，都可以指定两种预设的速度参数：'slow'和'fast'。使用.show('slow')会在600毫秒（0.6秒）内完成效果，而.show('fast')则是200毫秒（0.2秒）。如果传入的是其他字符串，jQuery就会在默认的400毫秒内完成效果。要指定更精确的速度，可以使用毫秒数值，例如.show(850)。注意，与字符串表示的速度参数名称不同，数值不需要使用引号。

下面，我们就为《林肯盖提斯堡演说辞》（Lincoln' s Gettysburg Address）的第2段指定显示速度，如代码清单4-8所示。

代码清单4-8

$(document).ready(function() {
  $('p').eq(1).hide();
  $('a.more').click(function(event) {
    event.preventDefault();
    $('p').eq(1).show('slow');
    $(this).hide();
  });
});

当我们在效果完成大约一半时捕获段落的外观时，会看到类似图4-5所示的结果。

图　4-5

4.3.2　淡入和淡出

虽然使用.show()和.hide()方法在某种程度上可以创造漂亮的效果，但其效果有时候也可能会显得过于花哨。考虑到这一点，jQuery也提供了两个更为精细的内置动画方法。如果想在显示整个段落时，只是逐渐地增大其不透明度，那么可以使用.fadeIn('slow')方法，参见代码清单4-9。

代码清单4-9

$(document).ready(function() {
  $('p').eq(1).hide();
  $('a.more').click(function(event) {
    event.preventDefault();
    $('p').eq(1).fadeIn('slow');
    $(this).hide();
  });
});

这一次如果捕获到段落显示到一半时的外观，则会变成如图4-6所示的效果。

最近两次效果的差别在于，.fadeIn()会在一开始设置段落的尺寸，以便内容能够逐渐显示出来。类似地，要逐渐减少不透明度，可以使用.fadeOut()。

图　4-6

4.3.3　滑上和滑下

对于本来就处于文档流之外的元素，比较适合使用淡入和淡出动画。例如，对于那些覆盖在页面之上的“亮盒”元素来说，采用淡入和淡出就显得很自然。不过，假如某个元素本来就处在文档流中，那再调用.fadeIn()就会导致文档“跳一下”，以便为新元素腾出地方来。但这种跳跃感在用户眼里就不总是那么美观了。

此时，使用jQuery的.slideDown()和.slideUp()方法通常是正确的选择。这两个动画方法仅改变元素的高度。要让段落以垂直滑入的效果出现，可以像代码清单4-10这样调用.slideDown('slow')。

代码清单4-10

$(document).ready(function() {
  $('p').eq(1).hide();
  $('a.more').click(function(event) {
    event.preventDefault();
    $('p').eq(1).slideDown('slow');
    $(this).hide();
  });
});

处在动画过程当中的段落如图4-7所示。

图　4-7

要实现相反的动画效果，应该调用.slideUp()。

4.3.4　切换可见性

有时候，我们需要切换某些元素的可见性，而不像前面例子中那样只把它们显示出来。要实现切换，可以先检查匹配元素的可见性，然后再添加适当的方法。在此，仍然以淡入淡出效果为例，可以把示例脚本修改为如代码清单4-11所示。

代码清单4-11

$(document).ready(function() {
  var $firstPara = $('p').eq(1);
  $firstPara.hide();
  $('a.more').click(function(event) {
    event.preventDefault();
    if ($firstPara.is(':hidden')) {
      $firstPara.fadeIn('slow');
      $(this).text('read less');
    } else {
      $firstPara.fadeOut('slow');
      $(this).text('read more');
    }
  });
});

与我们在本章前面所做的一样，首先缓存选择符以避免重复遍历DOM。而且，这里也不再隐藏被单击的链接，而是修改它的文本。

　为检测和修改元素中包含的文本，这里使用了.text()方法。第5章在介绍DOM操作时还将进一步讨论这个方法。

使用if else语句切换元素的可见性是非常自然的方式。但通过jQuery 复合效果方法，却不一定非要使用这个条件语句（尽管在这个例子中，需要条件语句来修改链接的文本）。jQuery提供了一个.toggle()方法，该方法的作用类似于.show()和.hide()方法，而且与它们一样的是，.toggle()方法时长参数也是可选的。另一个复合方法是.slideToggle()，该方法通过逐渐增加或减少元素高度来显示或隐藏元素。代码清单4-12是使用.slideToggle()方法的脚本。

代码清单4-12

$(document).ready(function() {
  var $firstPara = $('p').eq(1);
  $firstPara.hide();
  $('a.more').click(function(event) {
    event.preventDefault();
    $firstPara.slideToggle('slow');
    var $link = $(this);
    if ($link.text() == 'read more') {
      $link.text('read less');
    } else {
      $link.text('read more');
    }
  });
});