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中获取出错代码所在文件及行数的代码
Sep 23 Javascript
jquery构造器的实现代码小结
May 16 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
深入学习JavaScript 高阶函数
Jun 11 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php异常处理使用示例
2014/02/25 PHP
基于Jquery的表格隔行换色,移动换色,点击换色插件
2010/12/22 Javascript
js单词形式的运算符
2014/05/06 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
python计算最大优先级队列实例
2013/12/18 Python
初步解析Python中的yield函数的用法
2015/04/03 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
python3实现随机数
2018/06/25 Python
python 实现屏幕录制示例
2019/12/23 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
英语专业学生个人求职信范文
2014/01/06 职场文书
机关保密承诺书
2014/06/03 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
1000字打架检讨书
2014/11/03 职场文书
销售2014年度工作总结
2014/12/08 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
离婚上诉状范文
2015/05/23 职场文书
小学班主任研修日志
2015/11/13 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
PyQt5结合QtDesigner实现文本框读写操作
2021/06/11 Python
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫