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 相关文章推荐
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
深入浅出讲解ES6的解构
Aug 03 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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读取html并截取字符串的简单代码
2009/11/30 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
JS查看对象功能代码
2008/04/25 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Python切片知识解析
2016/03/06 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
英国在线女鞋目的地:SIMMI
2018/12/27 全球购物
几道PHP面试题
2013/04/14 面试题
员工入职担保书范文
2014/04/01 职场文书
小学评语大全
2014/04/22 职场文书
公司收款委托书范本
2014/09/20 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
趣味运动会加油词
2015/07/18 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
python热力图实现的完整实例
2022/06/25 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript