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代码超级推荐
Apr 05 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 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 中文乱码解决办法总结分析
2009/07/30 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
2017/04/12 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python运算符重载用法实例分析
2015/06/01 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python包和模块的分发详细介绍
2020/06/19 Python
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
南京某公司笔试题
2013/01/27 面试题
创伤外科专业推荐信范文
2013/11/19 职场文书
高中生操行评语大全
2014/04/25 职场文书
高中教师个人总结
2015/02/10 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书