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

js更优雅的兼容

Aug 12 Javascript

Jquery 自定义动画概述及示例

Mar 29 Javascript

javascript实现多级联动下拉菜单的方法

Feb 06 Javascript

微信小程序绘图之饼图实现

Oct 24 Javascript

jQuery实现radio第一次点击选中第二次点击取消功能

May 15 jQuery

详谈JS中数组的迭代方法和归并方法

Aug 11 Javascript

vue实现的上传图片到数据库并显示到页面功能示例

Mar 17 Javascript

Nuxt.js 数据双向绑定的实现

Feb 17 Javascript

vue单页面在微信下只能分享落地页的解决方案

Apr 15 Javascript

基于JS实现操作成功之后自动跳转页面

Sep 25 Javascript

Ant Design的Table组件去除

Oct 24 Javascript

详解JavaScript 中的批处理和缓存

Nov 19 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将数据库中所有内容生成静态html文档的代码

2010/04/12 PHP

学习php设计模式 php实现享元模式(flyweight)

2015/12/07 PHP

对php 判断http还是https,以及获得当前url的方法详解

2019/01/15 PHP

docker-compose部署php项目实例详解

2019/07/30 PHP

Gambit vs ForZe BO3 第一场 2.13

2021/03/10 DOTA

JavaScript学习笔记（十）

2010/01/17 Javascript

JS中confirm,alert,prompt函数区别分析

2011/01/17 Javascript

jquery 操作表格实现代码(多种操作打包)

2011/03/20 Javascript

node.js chat程序如何实现Ajax long-polling长链接刷新模式

2012/03/13 Javascript

JQuery中关于jquery.js与jquery.min.js的比较探讨

2013/05/15 Javascript

javascript中apply和call方法的作用及区别说明

2014/02/14 Javascript

一些老手都不一定知道的JavaScript技巧

2014/05/06 Javascript

给应用部分的js代码设定一个统一的入口

2014/06/15 Javascript

js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数

2016/10/25 Javascript

基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

2016/10/30 Javascript

JavaScript字符集编码与解码详谈

2017/02/02 Javascript

基于bootstrop常用类总结(推荐)

2017/09/11 Javascript

Angular2学习笔记之数据绑定的示例代码

2018/01/03 Javascript

基于Ionic3实现选项卡切换并重新加载echarts

2020/09/24 Javascript

[04:26]2014DOTA2西雅图国际邀请赛总决赛TOPPLAY

2014/07/22 DOTA

Python抓取框架 Scrapy的架构

2016/08/12 Python

Python实现合并两个列表的方法分析

2018/05/28 Python

Django中的Model操作表的实现

2018/07/24 Python

python内置数据类型之列表操作

2018/11/12 Python

用Python PIL实现几个简单的图片特效

2019/01/18 Python

对Python3 * 和 ** 运算符详解

2019/02/16 Python

python 两个数据库postgresql对比

2019/10/21 Python

Python Socket TCP双端聊天功能实现过程详解

2020/06/15 Python

Python操控mysql批量插入数据的实现方法

2020/10/27 Python

HTML5中使用postMessage实现Ajax跨域请求的方法

2016/04/19 HTML / CSS

捷克鲜花配送：Florea.cz

2018/10/29 全球购物

领导班子在批评与自我批评座谈会上的发言

2014/09/28 职场文书

预备党员思想汇报1000字

2014/10/07 职场文书

农民工工资承诺书大全

2015/05/04 职场文书

单位政审意见范文

2015/06/04 职场文书

Python编写车票订购系统 Python实现快递收费系统

2022/08/14 Python