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 相关文章推荐
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 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实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
PHP实现简单登录界面
2019/10/23 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python构建图像分类识别器的方法
2019/01/12 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
美丽人生观后感
2015/06/03 职场文书
国庆节新闻稿
2015/07/17 职场文书
spring cloud 配置中心native配置方式
2021/09/25 Java/Android