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去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
js实现简单秒表走动的时钟特效
Mar 25 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 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
mayfish 数据入库验证代码
2010/04/30 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
新闻内页-JS分页
2006/06/07 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript实现yield的方法
2013/11/06 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
vue内置组件component--通过is属性动态渲染组件操作
2020/07/28 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python numpy 点数组去重的实例
2018/04/18 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Python中的集合介绍
2019/01/28 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
简单了解Python write writelines区别
2020/02/27 Python
一款基于css3和jquery实现的动画显示弹出层按钮教程
2015/01/04 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
节水宣传标语口号
2015/12/26 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL