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自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
Oct 11 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
Jan 04 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
使用koa2创建web项目的方法步骤
Mar 12 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
深入解析php中的foreach问题
2013/06/30 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
按下Enter焦点移至下一个控件的实现js代码
2013/12/11 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
Python基础学习之常见的内建函数整理
2017/09/06 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python实现数字的格式化输出
2020/08/01 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
文员个人求职自荐信
2013/09/21 职场文书
网络程序员自荐信
2014/01/25 职场文书
心理咨询承诺书
2014/05/20 职场文书
警用民用对讲机找不同
2022/02/18 无线电