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 相关文章推荐
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
jquery实现预览提交的表单代码分享
May 21 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
js中的闭包实例展示
Nov 01 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
vue 路由守卫(导航守卫)及其具体使用
Feb 25 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
php开发工具之vs2005图解
2008/01/12 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
jquery延迟对象解析
2016/10/26 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
详解Python中的Cookie模块使用
2015/07/06 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
市场营销专业推荐信
2013/11/03 职场文书
护士辞职信范文
2014/01/19 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
五年级学生期末评语
2014/12/26 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Python绘画好看的星空图
2022/03/17 Python
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android