使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序

核心提示： Effects 模块还有其他一些函数，它们与 show()和 hide()非常类似，使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序(4)，并且最终所实现的功能也基本相同；只不过实现的方式不同，slideDown()和 slideUp()函数

Effects 模块还有其他一些函数，它们与 show()和 hide()非常类似，并且最终所实现的功能也基本相同；只不过实现的方式不同。slideDown()和 slideUp()函数分别用来显示和隐藏一个页面元素。不过，这是通过将该元素滑下或滑上的动画效果实现的（从其名称中不难看出这一点）。与我刚刚提到的增强了的 hide()和 show()函数类似，您也可以控制滑动的速度以及在效果完成时要调用的函数。此外，要显示/隐藏页面元素还有另一种选择，即 fadeIn()和 fadeOut()函数，正如其名字所示，这两个函数用来淡入页面元素直至该元素透明，然后使该元素消失。它们允许在效果完成时定制速度和要调用的函数。

有一个很有趣的函数，它可部分隐藏和显示页面元素，此函数是 fadeTo()，它能让页面元素部分透明。我认为此函数对 RIA 很重要，因为透明性是突出页面上某个元素的一种很好的方式，并可用来显示页面的禁用区域。例如，页面上有几个选项卡，可以让所有未被选中的选项卡呈现一些透明性来突出其未被选中。或者，在一个页面表单上，可以让所有没有焦点的元素呈现一些透明性以向用户突出哪个 Form元素当前具有焦点。此外，透明性本身就很酷。在进行设计时，不妨遵循这样一条通用的箴言 “如果苹果公司这么设计，效果一定很酷”。

清单 3. 使用 fadeTo()

增添很酷的效果

　　　
//　make　all　the　Form　elements　on　the　page　show　transparency　at　60%,　except　
//　the　one　that　currently　has　focus,　which　will　not　have　any　transparancy.　　
//　This　is　Apple　cool!　
　
$(":input").fadeTo("fast",　.60);　
$(":input").focus(function(){　
　　$(this).fadeTo("fast",　1);　
});　
$(":input").blur(function(){　
　　$(this).fadeTo("fast,　.60);　
　　});

编缉推荐阅读以下文章

• 使用 jQuery，第 2 部分: 构建未来的 Web 应用程序
• 使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器