jQuery淡入淡出元素让其效果更为生动


Posted in Javascript onSeptember 01, 2014

为了达到更为生动的效果,可以把一个元素淡出或淡入,在任何一种情况下,都只是随着时间来改变元素的透明度。jQuery提供了3个和淡入淡出相关的函数:

·fadeIn()使得一个隐藏的元素淡入视野。首先,元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走);然后,元素逐渐地变得可见。如果元素在页面上已经可见,则这个函数没有任何效果。如果没有提供一个速度值,元素使用“常规”设置来淡入(400毫秒)。

·fadeOut()通过使得一个可视的元素像幽灵般地淡出视线来隐藏它。如果元素在页面上已经隐藏,这个函数没有任何效果,这和fadeIn()函数一样。如果没有提供一个速度值,元素以400毫秒的速度淡出。

·fadeToggle()组合了淡入和淡出的效果。如果该元素当前是隐藏的,它会淡入视线中;如果它当前是可见 的,该元素会淡出视线。可以使用这个函数让一个提示框出现在页面上或从页面消失。例如,假设有一个按钮,其上显示单词“instructions”。当访 问者单击该按钮的时候,带有说明的一个div将淡入视线;再次单击该按钮,将会使说明淡出视线。要让该提示框每半秒钟淡入或淡出一次,可以这样编写代码:

$('#button').click(function(){
$('#instructions').fadeToggle(500);
});//end click

·fadeTo()的工作方式和其他两个效果函数略有不同。它把图像淡化到一定的透明度。例如,可以让图像淡化到半透明。和其他效果不同,必须提供一个速度值。此外,还提供0~1之间的一个值来表示元素的透明度。例如,要把所有的段落淡化到75%的透明度,可以这样编写代码:

$('p').fadeTo('normal',.75);

这个函数改变了一个元素的透明度,而不管这个元素是可见的还是不可见的。例如,假设要把当前隐藏的一个元素淡化到50%的透明度。然后,如果使用 show()或fadeIn()显示该元素,它会以50%的透明度显示。同样,如果隐藏一个半透明的元素,然后再显示它,它的透明度设置还是会恢复。

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
jquery 多级下拉菜单核心代码
May 21 Javascript
Javascript学习笔记之 对象篇(三) : hasOwnProperty
Jun 24 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 #Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 #Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 #Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 #Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 #Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 #Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 #Javascript
You might like
PHP生成带有雪花背景的验证码
2008/09/28 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python数组定义方法
2016/04/13 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
浅析python中while循环和for循环
2019/11/19 Python
Python常用编译器原理及特点解析
2020/03/23 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
幼儿如何来做好自我评价
2013/11/05 职场文书
小学毕业家长寄语
2014/01/19 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
网络编辑求职信
2014/04/30 职场文书
2014年商场工作总结
2014/11/22 职场文书
校本课程教学计划
2015/01/19 职场文书
教代会开幕词
2015/01/28 职场文书
关于童年的读书笔记
2015/06/26 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
详解Python中的进程和线程
2021/06/23 Python
IDEA2021.2配置docker如何将springboot项目打成镜像一键发布部署
2021/09/25 Java/Android
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers