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创建插件的代码分析
Apr 14 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
vue中appear的用法
Aug 17 Javascript
Vue.Draggable拖拽功能的配置使用方法
Jul 29 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
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中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
[08:02]DOTA2牵红线 zhou神抱得美人归
2014/03/22 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python Django批量导入数据
2016/03/25 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
python实践项目之监控当前联网状态详情
2019/05/23 Python
python中如何写类
2020/06/29 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
给民警的表扬信
2014/01/08 职场文书
给领导的检讨书
2014/02/16 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
离婚起诉书范本
2015/05/18 职场文书
民事答辩状格式范文
2015/05/21 职场文书