jQuery使用fadein方法实现渐出效果实例


Posted in Javascript onMarch 27, 2015

本文实例讲述了jQuery使用fadein方法实现渐出效果的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码通过jQuery的fadein方法控制指定色块逐渐显示的功能

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
 $("#div1").fadeIn();
 $("#div2").fadeIn("slow");
 $("#div3").fadeIn(3000);
 });
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" 
style="width:80px;height:80px;display:none;background-color:red;">
</div><br>
<div id="div2" 
style="width:80px;height:80px;display:none;background-color:green;">
</div><br>
<div id="div3" 
style="width:80px;height:80px;display:none;background-color:blue;">
</div>
</body>
</html>

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

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
javascript 用原型继承来实现对象系统
Mar 22 Javascript
JS 控件事件小结
Oct 31 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
node.js操作mongoDB数据库示例分享
Nov 26 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
深入理解JQuery循环绑定事件
Jun 02 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 #Javascript
javascript包装对象实例分析
Mar 27 #Javascript
javascript操作select元素实例分析
Mar 27 #Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 #Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 #Javascript
jquery使用animate方法实现控制元素移动
Mar 27 #Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 #Javascript
You might like
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
自己动手做一个SQL解释器
2006/10/09 PHP
如何用phpmyadmin设置mysql数据库用户的权限
2012/01/09 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
python去除所有html标签的方法
2015/05/05 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
python中的常量和变量代码详解
2018/07/25 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
在python中做正态性检验示例
2019/12/09 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
生产车间班组长岗位职责
2014/01/06 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
暑假学习心得体会
2014/09/02 职场文书
党员个人党性分析材料
2014/12/18 职场文书
分享3个非常实用的 Python 模块
2022/03/03 Python