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实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
js实现前端分页页码管理
Jan 06 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
微信小程序实现打卡签到页面
Sep 21 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
笑谈配置,使用Smarty技术
2007/01/04 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
js 居中漂浮广告
2010/03/21 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
理解Javascript闭包
2013/11/01 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JS实现设置ff与ie元素绝对位置的方法
2016/03/08 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
vue 动态生成拓扑图的示例
2021/01/03 Vue.js
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python isinstance函数介绍
2015/04/14 Python
python中实现k-means聚类算法详解
2017/11/11 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
python实现宿舍管理系统
2019/11/22 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
大学生如何写自荐信
2014/01/08 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers