编程 Javascript

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程序设计有所帮助。

jQuery使用fadein方法实现渐出效果实例

- Author -

上大王

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript高级程序设计（第3版）学习笔记5 js语句

Oct 11 Javascript

文本框input聚焦失焦样式实现代码

Oct 12 Javascript

jQuery随手笔记之常用的jQuery操作DOM事件

Nov 29 Javascript

jQuery实现的超简单点赞效果实例分析

Dec 31 Javascript

Jquery实现纵向横向菜单

Jan 24 Javascript

jquery+ajax实现直接提交表单实例分析

Jun 17 Javascript

详解Jquery 遍历数组之$().each方法与$.each()方法介绍

Jan 09 Javascript

javascript过滤数组重复元素的实现方法

May 03 Javascript

three.js中文文档学习之如何本地运行详解

Nov 20 Javascript

laypage+SpringMVC实现后端分页

Jul 27 Javascript

vue element ui validate 主动触发错误提示操作

Sep 21 Javascript

浅谈Vue static 静态资源路径和 style问题

Nov 07 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导出Word文档的原理和实例

2013/10/21 PHP

关于JS控制代码暂停的实现方法分享

2012/10/11 Javascript

js和jquery使按钮失效为不可用状态的方法

2014/01/26 Javascript

ExtJS判断IE浏览器类型的方法

2014/02/10 Javascript

PHP守护进程实例

2015/03/06 Javascript

jQuery实现给页面换肤的方法

2015/05/30 Javascript

js中unicode转码方法详解

2015/10/09 Javascript

js操作数组函数实例小结

2015/12/10 Javascript

thinkphp实现无限分类（使用递归）

2015/12/19 Javascript

js关于getImageData跨域问题的解决方法

2016/10/14 Javascript

node.js爬虫爬取拉勾网职位信息

2017/03/14 Javascript

Javascript操作dom对象之select全面解析

2017/04/24 Javascript

最基础的vue.js双向绑定操作

2017/08/23 Javascript

微信小程序文章详情页面实现代码

2018/09/10 Javascript

微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题

2018/10/09 Javascript

vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

2019/05/31 Javascript

vue实现随机验证码功能(完整代码)

2019/12/10 Javascript

记录微信小程序 height: calc(xx - xx)；无效问题

2019/12/30 Javascript

springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

2020/10/15 Javascript

如何在面试中手写出javascript节流和防抖函数

2020/10/22 Javascript

[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/17 DOTA

Python实现单词拼写检查

2015/04/25 Python

Python数据结构与算法之图的基本实现及迭代器实例详解

2017/12/12 Python

python自动发邮件库yagmail的示例代码

2018/02/23 Python

解决使用PyCharm时无法启动控制台的问题

2019/01/19 Python

python原类、类的创建过程与方法详解

2019/07/19 Python

python web框架Flask实现图形验证码及验证码的动态刷新实例

2019/10/14 Python

Pytorch maxpool的ceil_mode用法

2020/02/18 Python

一篇.NET面试题

2014/09/29 面试题

专科毕业生求职简历的自我评价

2013/10/12 职场文书

2013年办公室秘书的个人自我鉴定

2013/10/24 职场文书

学校岗位设置方案

2014/01/16 职场文书

员工安全责任书范本

2014/07/24 职场文书

甜品蛋糕店创业计划书

2014/09/21 职场文书

群众路线教育实践活动心得体会（教师）

2014/10/31 职场文书

乡镇党的群众路线教育实践活动制度建设计划

2014/11/03 职场文书