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 函数的副作用分析
Aug 23 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
js的回调函数详解
Jan 05 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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
生成缩略图
2006/10/09 PHP
用libtemplate实现静态网页生成
2006/10/09 PHP
php 中的str_replace 函数总结
2007/04/27 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
使用PHP开发留言板功能
2019/11/19 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
express启用https使用小记
2019/05/21 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python hmac模块使用实例解析
2019/12/24 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
销售人员中英文自荐信
2013/09/22 职场文书
十八大闭幕感言
2014/01/22 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
班主任寄语2015
2015/02/26 职场文书
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers