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 相关文章推荐
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 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
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
jQuery中实现动画效果的基本操作介绍
2013/04/16 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
中间件分为哪几类
2012/03/14 面试题
投标保密承诺书
2014/05/19 职场文书
租房协议书样本
2014/08/20 职场文书
悬空寺导游词
2015/02/05 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
springboot+VUE实现登录注册
2021/05/27 Vue.js
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL