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 new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
Dec 31 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
vue element自定义表单验证请求后端接口验证
Dec 11 Javascript
在vue项目中 实现定义全局变量 全局函数操作
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 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
python3图片转换二进制存入mysql
2013/12/06 Python
Python实现学校管理系统
2018/01/11 Python
python实现学员管理系统
2019/02/26 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python操作yaml说明
2020/04/08 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
DTD的含义以及作用
2014/01/26 面试题
生日宴会答谢词
2014/01/09 职场文书
手机被没收检讨书
2014/02/22 职场文书
安全生产网格化管理实施方案
2014/03/01 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
工作失职自我检讨书
2015/05/05 职场文书
四大名著读书笔记
2015/06/25 职场文书
欧元符号 €
2022/02/17 杂记