jQuery实现基本淡入淡出效果的方法详解


Posted in jQuery onSeptember 05, 2018

本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考,具体如下:

jQuery fadeIn()方法:用于淡入已隐藏的元素

jQuery fadeOut()方法:用于淡出可见的元素

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
});
});
</script>
</head>
<body>
<p>演示带有不同参数的fadeIn()方法。</p>
<button>点击</button>
<br />
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
</body>
</html>

运行结果:

jQuery实现基本淡入淡出效果的方法详解

jQuery fadeToggle()方法:方法可以在fadeIn()与fadeOut()方法之间进行切换

语法:$(selector).fadeToggle(speed,callback);

如果元素已淡出,则fadeToggle()会向元素添加淡入效果

如果元素已淡入,则fadeToggle()会向元素添加淡出效果

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>

运行结果:

jQuery实现基本淡入淡出效果的方法详解

jQuery fadeTo()方法:允许渐变为给定的不透明(值介于0与1之间)

语法:$(selector).fadeTo(speed,opacity,callback);

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo(1000,0.2);
});
});
</script>
</head>
<body>
<button>点击</button>
<br/>
<div id="div1" style="width:80px;height:80px;background-color:red;"</div>
</body>
</html>

运行结果:

jQuery实现基本淡入淡出效果的方法详解

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容还可查看本站专题:《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
You might like
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
在Python的Django框架中创建和使用模版
2015/07/15 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
自定义Django_rest_framework_jwt登陆错误返回的解决
2020/10/18 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
餐厅总经理岗位职责
2013/12/31 职场文书
小学语文业务学习材料
2014/06/02 职场文书
社区健康教育工作方案
2014/06/03 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书
学习保证书100字
2015/02/26 职场文书
中学生学习保证书
2015/02/26 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
手写实现JS中的new
2021/11/07 Javascript
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电