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 相关文章推荐
JQuery Ajax通过Handler访问外部XML数据的代码
Jun 01 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
AngularJS快速入门
Apr 02 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
vuex的简单使用教程
Feb 02 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
js实现简易拖拽的示例
Oct 26 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中大括号'{}'用法实例总结
2017/02/08 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
javascript时间函数大全
2014/06/30 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
用Python登录好友QQ空间点赞的示例代码
2017/11/04 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
个人简历自我评价
2014/01/06 职场文书
交通安全教育制度
2014/02/02 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
目标管理责任书
2014/04/15 职场文书
公司年底活动方案
2014/08/17 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书