jQuery中fadeOut()方法用法实例


Posted in Javascript onDecember 24, 2014

本文实例讲述了jQuery中fadeOut()方法用法。分享给大家供大家参考。具体分析如下:

此方法通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

fadeOut()方法的用法:

此方法可以规定动画效果的持续时间。例如:

$("div").fadeOut(5000)

以上代码规定div的淡出效果可在5000毫秒(5秒)内完成。
此方法也可以在动画完成后触发一个回调函数。例如:

$("div").fadeOut(5000,function(){alert('动画效果完成!')})

以上代码能够在动画完成以后触发回调函数,于是弹出一个提示框。
实例代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>fadeOut()函数-三水点靠木</title>

<style type="text/css">

div{

  background:#060;

  width:300px;

  height:300px;

  color:red

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){

  $("#up").click(function(){

    $("div").fadeOut(5000,function(){alert('动画效果完成!')});

  })

})

</script> 

</head>

<body>

  <div></div>

  <button id="up">点击查看效果</button>

</body>

</html>

以上代码点击按钮可以缓慢将div设置为透明效果,完全透明之后,然后指定回调函数。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
使用angular帮你实现拖拽的示例
Jul 05 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
创建js对象和js类的方法汇总
Dec 24 #Javascript
javascript使用prototype完成单继承
Dec 24 #Javascript
jQuery中slideUp()方法用法分析
Dec 24 #Javascript
node.js开机自启动脚本文件
Dec 24 #Javascript
使用jquery动态加载js文件的方法
Dec 24 #Javascript
使用javascript实现Iframe自适应高度
Dec 24 #Javascript
常用的jQuery前端技巧收集
Dec 24 #Javascript
You might like
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
paypal即时到账php实现代码
2010/11/28 PHP
利用PHP将部分内容用星号替换
2020/04/21 PHP
php pdo操作数据库示例
2017/03/10 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
详解Angular 自定义结构指令
2017/06/21 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
Python中super的用法实例
2015/05/28 Python
python实现实时监控文件的方法
2016/08/26 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python制作词云的方法
2018/01/03 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
建筑工地门卫岗位职责
2014/04/30 职场文书
民生工作实施方案
2014/05/31 职场文书
2015年党员自评材料
2014/12/17 职场文书
欠条格式范本
2015/07/03 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android