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 与或运算符 || &amp;&amp; 妙用
Dec 09 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 Javascript
jquery队列函数用法实例
Dec 16 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
vue.js层叠轮播效果的实例代码
Nov 08 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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新手上路(十一)
2006/10/09 PHP
学习php分页代码实例
2013/10/24 PHP
jQuery使用手册之三 CSS操作
2007/03/24 Javascript
JavaScript中获取元素索引的函数
2010/09/10 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
Python中input和raw_input的一点区别
2014/10/21 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
饮料业务员岗位职责
2013/12/15 职场文书
请假条格式范文
2014/04/10 职场文书
工商干部先进事迹
2014/05/14 职场文书
2014年财务科工作总结
2014/11/11 职场文书
先进工作者个人总结
2015/02/15 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers