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 相关文章推荐
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
jQuery为DOM动态追加事件的方法
Feb 16 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
javascript绘制简单钟表效果
Apr 07 Javascript
使用vue实现通过变量动态拼接url
Jul 22 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
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
会话Bean的种类
2013/11/07 面试题
优秀演讲稿范文
2013/12/29 职场文书
文明社区申报材料
2014/08/21 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL