第10章 jQuery中的动画与效果.ppt

第10章 jQuery中的动画与效果 互联网的高速发展使各式各样的网站层出不穷，如何在众多的网站中脱颖而出一直是个值得深入探讨的问题。“提高用户体验，关注用户交互”可以说是一个比较公认的可行方式。给用户提供一种舒适的用户使用体验，可以有效的提高用户访问网站的回头率。因此，富客户端的概念应运而生，Flash的应用也十分普遍。jQuery也提供了十分强大的动画与实现各种特殊效果的功能，这也成为jQuery吸引开发者一个很重要的方面。本章将对jQuery中的动画和效果进行介绍，包括基本动画效果、滑动效果以及淡入淡出效果，最后对如何自定义动画作简单介绍。 10.1 基本效果 对用户而言，页面上的元素最直观的表现形式有两种：看得见和看不见的。用户只会关心看得见的部分，对看不见的部分不去理睬。因此，在适当的时候让用户看到合适的内容也成为提高用户体验过程中一个很重要的部分。本节将介绍jQuery中对页面元素的显示以及隐藏操作。 10.1.1 隐藏元素 经常会在网站上见到这种应用，某些需要显示给用户的信息，可能在用户看过之后就不需要再留在页面上了。一般的处理方式是在这种元素旁边多一个按钮，由用户决定是否将该元素在页面上隐藏。 10.1.2 显示元素 很多时候，有些比较细节性的信息开始的时候没有必要让用户看到，可以让用户想要查看的时候再显示出来。传统的处理方式是转向到另外一个页面进行显示，这样就使用户离开了先前的页面，而这可能并不是用户想要的。 10.1.2 显示元素 jQuery中用来显示已经被隐藏的元素的方法是使用show(speed,[callback])函数。 10.1.3 交替显示隐藏 所谓交替显示隐藏，就是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。这在很多大型的网站上也被广泛使用。 10.1.3 交替显示隐藏 当单击左上角的“全球”链接时，设定使用偏好的国家列表区域将显示出来，在此单击“全球”链接，该区域再次隐藏起来。jQuery中用于实现交替显示隐藏的函数是toggle(speed,[callback]) 。 10.2 滑动效果 show(speed,[callback])和hide(speed,[callback])函数实现的动画效果是向左上角缩小，并且元素本身逐渐变淡直至消失。本节将介绍另外一种动画效果：滑动效果，即页面元素以滑动的方式进行收缩和展开。 10.2.1 向上收缩效果 所谓向上收缩效果就是对页面元素通过高度变化（向上减小）来动态地隐藏。在jQuery中实现该效果的函数是slideUp(speed,[callback]) 。 10.2.2 向下展开 向上收缩用于元素的隐藏，向下展开则用于隐藏元素的显示。jQuery中用于实现向下滑动展开元素内容的函数为slideDown(speed,[callback]) 。 10.2.3 交替伸缩样式 交替伸缩样式和交替显示隐藏类似，都是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是slideToggle(speed,[callback]) 。 10.3 淡入淡出效果 淡入淡出效果在电影以及PowerPoint演示中经常见到，简单地说，就是实现画面融入背景渐渐消失或者从纯色背景逐渐显示的效果。从实现上来讲，就是控制画面本身的不透明度来实现其显示和隐藏效果。本节将介绍jQuery中淡入淡出效果的实现，以及自定义淡入淡出透明度的方法。 10.3.1 淡入效果 淡入效果是指页面上元素的透明度不断减小，直到清晰显示出来的效果。在jQuery中实现淡入效果使用fadeIn(speed,[callback])函数。 10.3.2 淡出效果 淡出效果是指页面上元素的透明度不断增大，直到消失不见的效果。jQuery中处理淡出效果的是fadeOut(speed,[callback])函数。 10.3.3 自定义不透明度 fadeOut(speed,[callback])函数和fadeIn(speed,[callback])函数实现的最终结果要么是完全显示元素，要么是完全隐藏元素，不能够停留在中间的某个状态上。jQuery中专门有一个函数来设定最终结果为中间某个状态，换句话说就是设定最终的元素为半透明状态。这个函数就是fadeTo(speed,opacity,[callback])函数。 10.4 自定义动画效果 jQuery提供了诸如滑动效果、淡入淡出等一系列十分优秀的动画效果，可以让用户很方便就实现一些很酷的动画特效。但是，这些简单的特效远远不能满足用户个性化的需求。因此，jQuery还有一个更加强