jQuery中slideUp()方法用法分析


Posted in Javascript onDecember 24, 2014

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

此方法通过高度变化(向上减小)来动态地隐藏所有匹配的元素,并且隐藏完成后还可以地触发一个回调函数。
slideUp()方法只调整元素的高度,可以使匹配的元素以“滑动“方式隐藏起来。

一.语法结构:
此方法可以规定动画效果持续时间,如果没有规定时间则使用默认值normal。例如:

$("div").slideUp(5000)

以上代码可以设置动画效果在5000毫秒(5秒)内完成。
此方法也可以在动画完成后触发一个回调函数。例如:
("div").slideUp(5000,function(){alert('向下滑动完成!')});

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

<html> 

<head> 

<meta charset="utf-8"> 

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

<head>

<style type="text/css">

div{

  background:#060;

  width:300px;

  height:300px;

  color:red;

}

</style>

<title>三水点靠木</title>

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

<script type="text/javascript"> 

$(document).ready(function(){

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

    $("div").slideUp(5000,function(){alert('向下滑动完成!')});

  })

})

</script> 

</head>

<body>

<div></div>

<button id="up">点击向上滑动</button>

</body>

</html>

在以上代码中,点击按钮,div会缓慢上拉,完成之后会弹出一个对话框。

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

Javascript 相关文章推荐
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Angularjs分页查询的实现
Feb 24 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
纯javascript实现选择框的全选与反选功能
Apr 08 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
node.js开机自启动脚本文件
Dec 24 #Javascript
使用jquery动态加载js文件的方法
Dec 24 #Javascript
使用javascript实现Iframe自适应高度
Dec 24 #Javascript
常用的jQuery前端技巧收集
Dec 24 #Javascript
jQuery中hide()方法用法实例
Dec 24 #Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 #Javascript
jQuery的css()方法用法实例
Dec 24 #Javascript
You might like
一些星际专用术语解释
2020/03/04 星际争霸
PHP正则验证Email的方法
2015/06/15 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
Python struct.unpack
2008/09/06 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
python实现单链表的方法示例
2019/09/03 Python
Django操作session 的方法
2020/03/09 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
晚宴邀请函范文
2014/01/15 职场文书
生日主持词
2014/03/20 职场文书
中班开学寄语
2014/04/04 职场文书
岗位职责说明书
2014/05/07 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书