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刷新框架子页面的七种方法代码
Nov 20 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
2010/04/15 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
三年大学自我鉴定
2014/01/16 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
运动会主持词大全
2015/07/02 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js