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 相关文章推荐
javascript object array方法使用详解
Dec 03 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
vue实现分页栏效果
Jun 28 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
小程序实现投票进度条
Nov 20 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中捕获超时事件的方法实例
2015/02/12 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
原生javascript实现图片按钮切换
2015/01/12 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
对python中UDP,socket的使用详解
2019/08/22 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
python链表类中获取元素实例方法
2021/02/23 Python
工商管理实习生自我鉴定范文
2013/12/18 职场文书
市场营销专业自荐书
2014/06/10 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
行政司机岗位职责
2015/04/10 职场文书
大学推普周活动总结
2015/05/07 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
学习nginx基础知识
2021/09/04 Servers
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
Python学习之os包使用教程详解
2022/03/21 Python