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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 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 escape URL编码
2008/12/10 PHP
Laravel框架执行原生SQL语句及使用paginate分页的方法
2018/08/17 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python可视化实现代码
2019/01/15 Python
图文详解python安装Scrapy框架步骤
2019/05/20 Python
简单了解python数组的基本操作
2019/11/26 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
十岁生日家长答谢词
2014/01/17 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
幼儿园家长工作总结2015
2015/04/25 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书