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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
没有document.getElementByName方法
Aug 19 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
Vue.set 全局操作简单示例
Sep 19 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php里array_work用法实例分析
2015/07/13 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
js获取键盘按键响应事件(兼容各浏览器)
2013/05/16 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
浅析python中while循环和for循环
2019/11/19 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
元宵晚会主持词
2014/03/25 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
PL350与SW11的比较
2021/04/22 无线电
Python 如何解决稀疏矩阵运算
2021/05/26 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang
Java线程的6种状态与生命周期
2022/05/11 Java/Android