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 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
微信小程序 开发工具快捷键整理
Oct 31 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue实现文件上传功能
Aug 13 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 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 静态页面中显示动态内容
2009/08/14 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
浅谈 javascript 事件处理
2015/01/04 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python进程间通信用法实例
2015/06/04 Python
Python实现学生成绩管理系统
2020/04/05 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python中id函数运行方式
2020/07/03 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
杭州联环马网络笔试题面试题
2013/08/04 面试题
北大自主招生自荐信
2013/10/19 职场文书
机械绘图员岗位职责
2013/11/19 职场文书
银行工作检查书范文
2014/01/31 职场文书
继承权公证书
2014/04/09 职场文书
白岩松演讲
2014/05/21 职场文书
责任书格式范文
2014/07/28 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
教师求职自荐信
2015/03/26 职场文书
土建施工员岗位职责
2015/04/11 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书