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 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
vue中element 的upload组件发送请求给后端操作
Sep 07 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
2016/01/28 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
JS实现页面打印功能
2017/03/16 Javascript
bootstrap常用组件之头部导航实现代码
2017/04/20 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Python交换变量
2008/09/06 Python
python对json的相关操作实例详解
2017/01/04 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Django设置Postgresql的操作
2020/05/14 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
数据库的约束含义
2012/09/09 面试题
制定岗位职责的原则
2013/11/08 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
数据保密承诺书
2014/06/03 职场文书
幸福中国演讲稿
2014/09/12 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
pytorch 6 batch_train 批训练操作
2021/05/28 Python