9.5 链化jQuery的动画方法
当调用jQuery对象的方法时，方法通常返回最初调用它的对象。例如，$(“h1”)返回表示所有h1元素的一个jQuery对象，$(“h1”).fadeOut(3000)返回同样表示所有h1元素的jQuery对象，要修改h1元素的文本，并且使它的颜色淡去，可以输入如下代码：
$("h1").text("This will fade out").fadeOut(3000);
像这样在一行中调用多个方法叫作链化（chaining）
可以对相同的元素链化多个动画效果。例如，可以把方法fadeOut和fadeIn的调用链化起来，以便淡出一个元素后再立即将其淡入：
$("h1").fadeOut(3000).fadeIn(2000);
fadeIn动画效果让一个不可见的元素淡入回来。jQuery很聪明，知道像这样在一行中链接两个动画效果，可能是想要让它们一个接着一个地完成。因此，这行代码先用3秒钟把h1元素淡出，然后再用2秒钟把它淡入回来。
jQuery提供了类似于fadeOut和fadeIn的两个额外的动画方法，分别名为slideUp和slideDown。slideUp方法的上滑动效果让元素消失，slideDown通过向下滑动效果让它们再次出现。用如下的代码替代dom.html文档中的第2个script元素，重新加载页面并测试：
$("h1").slideUp(1000).slideDown(1000);
这里选中了h1元素，用1秒钟让它向上滑动消失，然后用1秒钟让它向下滑动重现。
试试看
使用fadeIn使得不可见的元素变得可见。但是，如果对一个已经可见的元素或紧跟在已经实现了动画的元素后面的一个元素调用fadeIn，会发生什么情况？
例如，假设在dom.html文档中的标题后边添加一个新的p元素。尝试使用slideUp和slideDown来隐藏和显示h1元素，看看对p元素会产生什么影响。如果使用fadeOut和fadeIn,又会怎样？
如果对相同的元素调用fadeOut和fadeIn，而不使用链化，会发生什么情况？如下所示：
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
尝试把前面的代码添加到一个for循环中执行5次，会发生什么情况？
对jQuery的显示方法和隐藏方法所做的事情，你怎么想？尝试运行这些方法，以验证你的想法是否正确。如何才能使用隐藏方法淡入一个已经可见的元素？
本站内容未经许可，禁止任何网站及个人进行转载。
