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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
Javascript中的对象和原型(二)
Aug 12 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
JS实现电商商品展示放大镜特效
Jan 07 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
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
java script编程起步(第三课)
2007/01/10 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
班长岗位职责
2013/11/10 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
中学教师师德承诺书
2014/05/23 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
未婚证明范本
2015/06/15 职场文书
四则混合运算教学反思
2016/02/23 职场文书
python实现三次密码验证的示例
2021/04/29 Python
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
react 路由Link配置详解
2021/11/11 Javascript