淡入淡出

管理员06  发布于:2014-11-23  浏览:

摘要:淡入淡出动画通过改变元素的透明度来实现动态显示和隐藏的效果,可以看到show和hide动画是内置了淡入淡出和滑动效果的动画。但是如果要单独实现淡入效果,可以使用jQuery单独提供的淡入淡出方法,如表10.13所示。 fideln和fideOut对应show和hide函数的淡入淡出特效,可以看到它们的参数也基本相同,在此不做过多解释。fadeTo允许将指定的元素淡入或淡出到指定的透明度,这个透明度由opacity指定。下面新建一个名为jQueryDem028.html的网页,在该网页上依然放置1个DIV和3个按钮,分别用来演示这3个淡入淡出方法的使用效果,如代码10.26所示: 代码中定义的3个按钮的click事件处理代码分别调用了fadeln、fadeOut和fadeTo方法来实现淡入淡出效果,通过运行示例观察可以发现,fadeTo会将DIV元素变为40%的透明度显示,这里指定透明度时使用小数位表示,完全透明为0,完
  淡入淡出动画通过改变元素的透明度来实现动态显示和隐藏的效果,可以看到show和hide动画是内置了淡入淡出和滑动效果的动画。但是如果要单独实现淡入效果,可以使用jQuery单独提供的淡入淡出方法,如表10.13所示。
  fideln和fideOut对应show和hide函数的淡入淡出特效,可以看到它们的参数也基本相同,在此不做过多解释。fadeTo允许将指定的元素淡入或淡出到指定的透明度,这个透明度由opacity指定。下面新建一个名为jQueryDem028.html的网页,在该网页上依然放置1个DIV和3个按钮,分别用来演示这3个淡入淡出方法的使用效果,如代码10.26所示:
  代码中定义的3个按钮的click事件处理代码分别调用了fadeln、fadeOut和fadeTo方法来实现淡入淡出效果,通过运行示例观察可以发现,fadeTo会将DIV元素变为40%的透明度显示,这里指定透明度时使用小数位表示,完全透明为0,完全不透明为1。fadeTo还定义了一个回调函数,以便在淡入或淡出显示完毕时会显示一个提示信息框。
  实际上在实现动画效果时,通过整合使用show、hide、toggle、滑动方法和淡入淡出方法可以为网站带来很多非常有趣的效果,还可以使用animate方法来创建自定义的动画,限于篇幅,请大家参考jQuery的文档。
  本章介绍了目前最流行的JavaScript脚本库jQuery的使用,首先讨论了jQuery的作用,详细讨论了如何下载jQuery的最新版本并进行安装,如何使用jQuery来创建操作网页中的对象。jQuery的工厂函数$O会对元素进行jQuery封装,使得网站开发人员可以调用由jQuery定义的各种方法。在10.2节中讨论了如何封装jQuery对象及如何转换为DOM对象。jQuery的核心是选择器,10.3节讨论了jQuery可供使用的选择器的使用方法,无论如何,学好选择器的使用是学好jQuery的基础。10.4节开始讨论如何使用jQuery提供的方法操作DOM对象中的属性和事件,详细介绍了用jQuery提供的多种API来完成使用传统JavaScript代码难以实现的工作,最后讨论了用jQuery提供的动画函数来轻松地创建动画。

文章链接:http://www.jihai.com/a/jiaocheng/jquery/201411/841.html
标签:动画(25)元素(26)通过(18)的(233)
作者:管理员06 来源:未知 发布于2014-11-23 15:29
您可能喜欢的文章

热门模板
热门阅读
热门插件