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 $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JavaScript返回网页中超链接数量的方法
Apr 03 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 Javascript
springboot+VUE实现登录注册
May 27 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP 源代码压缩小工具
2009/12/22 PHP
php存储过程调用实例代码
2013/02/03 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
JS实现清除指定cookies的方法
2014/09/20 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
微信小程序 同步请求授权的详解
2017/08/04 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
Python读写文件基础知识点
2019/06/10 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
优秀员工评优方案
2014/06/13 职场文书
硕士生找工作求职信
2014/07/05 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
民间个人借款协议书
2014/09/30 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
卡特教练观后感
2015/06/08 职场文书
婚宴新娘致辞
2015/07/28 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
《最终幻想14》6.01版本4月5日推出 追加新任务新道具
2022/04/03 其他游戏