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 相关文章推荐
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
node基于async/await对mysql进行封装
Jun 20 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
图书管理程序(一)
2006/10/09 PHP
精通php的十大要点(上)
2009/02/04 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
PHP文件读写操作相关函数总结
2014/11/18 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
详解PHP5.6.30与Apache2.4.x配置
2017/06/02 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020/02/10 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
AngularJS内置指令
2015/02/04 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python中常见的异常总结
2018/02/20 Python
Python for循环生成列表的实例
2018/06/15 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
车队司机自我鉴定
2014/03/02 职场文书
给校长的建议书500字
2014/05/15 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书