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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
遍历DOM对象内的元素属性示例代码
Feb 08 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
Vue数据监听方法watch的使用
Mar 28 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
JavaScript流程控制(循环)
Dec 06 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获取数组长度的方法(有实例)
2013/10/27 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
Laravel 简单实现Ajax滚动加载示例
2019/10/22 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jquery 分页控件实现代码
2009/11/30 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python 输出列表元素实例(以空格/逗号为分隔符)
2019/12/25 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
遇到的Mysql的面试题
2014/06/29 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
主题教育活动总结
2014/05/05 职场文书
干部选拔任用方案
2014/05/26 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python