编程 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 相关文章推荐

使Ext的Template可以解析二层的json数据的方法

Dec 22 Javascript

javascript 命名规则变量命名规则

Feb 25 Javascript

BootStrap网页中代码显示用法详解

Oct 21 Javascript

AngualrJs清除定时器遇到的坑

Oct 13 Javascript

JavaScript实现二叉树的先序、中序及后序遍历方法详解

Oct 26 Javascript

使用vue + less 实现简单换肤功能的示例

Feb 21 Javascript

vue 组件的封装之基于axios的ajax请求方法

Aug 11 Javascript

vue全局自定义指令-元素拖拽的实现代码

Apr 14 Javascript

基于JS实现web端录音与播放功能

Apr 17 Javascript

js设计模式之代理模式及订阅发布模式实例详解

Aug 15 Javascript

JavaScript canvas绘制折线图

Feb 18 Javascript

Vue自定义组件的四种方式示例详解

Feb 28 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

全国FM电台频率大全 - 21 海南省

2020/03/11 无线电

php 定界符格式引起的错误

2011/05/24 PHP

PHP PDO fetch 模式各种参数的输出结果一览

2015/01/07 PHP

php接口数据加密、解密、验证签名

2015/03/12 PHP

Yii2 rbac权限控制之rule教程详解

2016/06/23 PHP

PHP排序算法之简单选择排序(Simple Selection Sort)实例分析

2018/04/20 PHP

PHP容器类的两种实现方式示例

2019/07/24 PHP

PHP实现Snowflake生成分布式唯一ID的方法示例

2020/08/30 PHP

JQuery选择器特辑详细小结

2012/05/14 Javascript

jQuery调用AJAX时Get和post公用的乱码解决方法实例说明

2013/06/04 Javascript

javascript获取元素离文档各边距离的方法

2015/02/13 Javascript

理解javascript中try...catch...finally

2015/12/25 Javascript

功能强大的jquery.validate表单验证插件

2016/11/07 Javascript

详解Jquery Easyui的验证扩展

2017/01/09 Javascript

jQuery实现简单的抽奖游戏

2017/05/05 jQuery

基于layer.js实现收货地址弹框选择然后返回相应的地址信息

2017/05/26 Javascript

关于在vue-cli中使用微信自动登录和分享的实例

2017/06/22 Javascript

Vue组件开发之LeanCloud带图形校验码的短信发送功能

2017/11/07 Javascript

详解VUE2.X过滤器的使用方法

2018/01/11 Javascript

不得不知的ES6小技巧

2018/07/28 Javascript

vue element中axios下载文件（后端Python）

2019/05/10 Javascript

解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题

2019/11/20 Javascript

vue打包通过image-webpack-loader插件对图片压缩优化操作

2020/11/12 Javascript

[01:48]完美圣典齐天大圣至宝宣传片

2016/12/17 DOTA

跟老齐学Python之不要红头文件(1)

2014/09/28 Python

跟老齐学Python之编写类之四再论继承

2014/10/11 Python

Python读写Json涉及到中文的处理方法

2016/09/12 Python

Python使用django框架实现多人在线匿名聊天的小程序

2017/11/29 Python

使用python绘制二元函数图像的实例

2019/02/12 Python

从0到1使用python开发一个半自动答题小程序的实现

2020/05/12 Python

html5教你做炫酷的碎片式图片切换 (canvas)

2017/07/28 HTML / CSS

西班牙土拨鼠床垫公司，感觉在云端：Marmota

2019/03/18 全球购物

Servlet的生命周期

2013/08/25 面试题

2015年度个人业务工作总结

2015/04/27 职场文书

2016年先进教师个人事迹材料

2016/02/26 职场文书

2022新作动画《福星小子》释出宣传影片加入内田真礼&宫野真守配音演出

2022/04/08 日漫