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 相关文章推荐
jQuery UI的Dialog无法提交问题的解决方法
Jan 11 Javascript
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
Jan 30 Javascript
小程序如何构建骨架屏
May 29 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
详解JavaScript 作用域
Jul 14 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 开发环境配置(Zend Studio)
2010/04/28 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP制作万年历
2015/01/07 PHP
php实现httpRequest的方法
2015/03/13 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Angular.js实现动态加载组件详解
2017/05/28 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
javascript实现京东快递单号的查询效果
2020/11/30 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
详解在Python程序中使用Cookie的教程
2015/04/30 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
买房委托公证书
2014/04/08 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
感恩节活动策划方案
2014/05/16 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
详解Vue3使用axios的配置教程
2022/04/29 Vue.js