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

PHP中CURL的几个经典应用实例

Jan 23 Javascript

鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

Mar 12 Javascript

JavaScript中Math.SQRT2属性的使用详解

Jun 14 Javascript

jQuery 中的 DOM 操作

Apr 26 Javascript

JavaScript数组实现数据结构中的队列与堆栈

May 26 Javascript

JS查找字符串中出现最多的字符及个数统计

Feb 04 Javascript

基于angular6.0实现的一个组件懒加载功能示例

Apr 12 Javascript

Vue通过for循环随机生成不同的颜色或随机数的实例

Nov 09 Javascript

vue实现购物车选择功能

Jan 10 Javascript

Vue实现简单计算器案例

Feb 25 Javascript

javascript设计模式 ? 外观模式原理与用法实例分析

Apr 15 Javascript

解决vue无法侦听数组及对象属性的变化问题

Jul 17 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中使用CURL伪造来路抓取页面或文件

2011/05/04 PHP

PHP模板引擎smarty详细介绍

2015/05/26 PHP

PHP微信公众号开发之微信红包实现方法分析

2017/07/14 PHP

ECMAScript 基础知识

2007/06/29 Javascript

JQuery操作iframe父页面与子页面的元素与方法(实例讲解)

2013/11/20 Javascript

利用js(jquery)操作Cookie的方法说明

2013/12/19 Javascript

Javascript判断图片尺寸大小实例分析

2014/06/16 Javascript

学习JavaScript设计模式(封装)

2015/11/26 Javascript

老生常谈 js中this的指向

2016/06/30 Javascript

AngularJS中过滤器的使用与自定义实例代码

2016/09/17 Javascript

JS实现本地存储信息的方法(基于localStorage与userData)

2017/02/18 Javascript

详解vue.js的事件处理器v-on:click

2017/06/27 Javascript

JavaScript编写棋盘覆盖代码详解

2017/08/28 Javascript

详解如何实现一个简单的 vuex

2018/02/10 Javascript

Vue父组件如何获取子组件中的变量

2019/07/24 Javascript

H5+css3+js搭建带验证码的登录页面

2020/10/11 Javascript

js实现移动端轮播图滑动切换

2020/12/21 Javascript

[00:15]天涯墨客终极技能展示

2018/08/25 DOTA

python 网络编程常用代码段

2016/08/28 Python

Python使用pyautogui模块实现自动化鼠标和键盘操作示例

2018/09/04 Python

一篇文章弄懂Python中的可迭代对象、迭代器和生成器

2019/08/12 Python

pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法

2019/08/17 Python

Pytorch Tensor 输出为txt和mat格式方式

2020/01/03 Python

pycharm 中mark directory as exclude的用法详解

2020/02/14 Python

Python与C/C++的相互调用案例

2021/03/04 Python

突破canvas语法限制让他支持链式语法

2012/12/24 HTML / CSS

实例讲解使用SVG制作loading加载动画的方法

2016/04/05 HTML / CSS

文体活动实施方案

2014/03/27 职场文书

参赛口号

2014/06/16 职场文书

2014年民政局关于保密工作整改措施

2014/09/19 职场文书

领导干部群众路线剖析材料

2014/10/09 职场文书

通知函的格式

2015/04/27 职场文书

Python序列化与反序列化相关知识总结

2021/06/08 Python

分析mysql中一条SQL查询语句是如何执行的

2021/06/21 MySQL

为什么代码规范要求SQL语句不要过多的join

2021/06/23 MySQL

Python爬虫基础之简单说一下scrapy的框架结构

2021/06/26 Python