jQuery中slideUp()方法用法分析
转载 & & 投稿：shichen2014
这篇文章主要介绍了jQuery中slideUp()方法用法,以实例形式分析了slideUp()方法的功能、定义及具体使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery中slideUp()方法用法。分享给大家供大家参考。具体分析如下：
此方法通过高度变化（向上减小）来动态地隐藏所有匹配的元素，并且隐藏完成后还可以地触发一个回调函数。
slideUp()方法只调整元素的高度，可以使匹配的元素以“滑动“方式隐藏起来。
一.语法结构:
此方法可以规定动画效果持续时间，如果没有规定时间则使用默认值normal。例如:
代码如下:$("div").slideUp(5000)
以上代码可以设置动画效果在5000毫秒(5秒)内完成。
此方法也可以在动画完成后触发一个回调函数。例如:
代码如下:("div").slideUp(5000,function(){alert('向下滑动完成！')});
以上代码能够在动画完成以后触发回调函数，于是弹出一个提示框。
二.实例代码:
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="author" content="http://www.jb51.net/" /&
&style type="text/css"&
& background:#060;
& width:300
& height:300
&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('向下滑动完成！')});
&div&&/div&
&button id="up"&点击向上滑动&/button&
在以上代码中，点击按钮，div会缓慢上拉，完成之后会弹出一个对话框。
希望本文所述对大家的jQuery程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具博客分类：
本人做的是手机端的前端开发，事事处处都得从手机用户的体验着手考虑。大家都知道手机相对于pc来说要小很多，所要容纳的东西相对于pc来说也要少之又少。一些重要的东西又希望用户在打开手机网站的第一屏就能看到，这时就要尽可能地将重点呈现给用户。
内容又由文字，图片等等信息组成，如果文字过长，就显得冗余，这里就为大家介绍一个如何隐藏多余文字和展开多余文字的方法。
需要的技术支持：CSS3，一般jQuery库；
HTML代码如下：
&div class="slideup"&This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.This is a test about javascript function slideUp and slideDown.
&a href="javascript:void(0)" class="btn_click arrowdown"&展开更多&/a&
CSS代码如下：
.slideup{width:320height:overflow:margin:0border:1px solid #text-align:padding: 10background: #999;color:#font-weight:border-radius: 0 0 8px 8}
.the_height{height: 450}
.slidedown{height:}
.btn_click{display:width: 120height: 30position:line-height:30margin: 10color: #background: #999;text-align:text-decoration:text-indent:-1border-radius: 5}
.arrowup:after{content: "";width: 8height: 8border: 3px double #position:top: 10right:18border-width: 3px 3px 0 0;-webkit-transform:rotate(-45deg);}
.arrowup:before{content: "";width: 6height: 6border: 1px solid #position:top: 15right:20border-width: 1px 1px 0 0;-webkit-transform:rotate(-45deg);}
.arrowdown:after{content: "";width: 8height: 8border: 3px double #position:top: 8right:18border-width: 3px 3px 0 0;-webkit-transform:rotate(135deg);}
.arrowdown:before{content: "";width: 6height: 6border: 1px solid #position:top: 7right:20border-width: 1px 1px 0 0;-webkit-transform:rotate(135deg);}
js代码如下：
$('.btn_click').click(function(){
var class_lists=$('.slideup').attr('class');
var class_index=class_lists.indexOf('isdown');
if(class_index==-1){
$('.slideup').slideDown().addClass('isdown slidedown');
$('.btn_click').html("收起更多").removeClass('arrowdown').addClass('arrowup');
$('.slideup').slideDown().addClass('the_height').removeClass('isdown slidedown');
$('.btn_click').html("展开更多").removeClass('arrowup').addClass('arrowdown');
$(document).ready(function(){
var article_height=$('.slideup').height();
//alert(article_height);
if(article_height&=450){
$('.btn_click').hide();
$('.slideup').addClass('slidedown');
$('.slideup').addClass('the_height');
最终效果如下：
如果文字高度大于450px，就隐藏，如下：
通过点击展开更多按钮即可展开更多文字，如下：
这里也有几个重点和大家说下：
1.页面第一次加载时的状态：按照按钮的状态分，一是文章高度大于450px时，按钮隐藏；二是文章高度小于450px时，按钮显示。当按钮显示时，又分为两个状态，即为文章收起的状态和文章展开的状态；
2.CSS重点解析：.slideup:设置页面加载时页面的初始样式；.the_height:设置页面加载时，如果文章高度大于450px时，就添加该类；.slidedown:设置文章展开时的样式；.btn_click:设置按钮的初始样式；.arrowup:after,.arrowup:before及.arrowdown:after,.arrowdown:before分别为文章展开和收起时的箭头的方向设置；
3.js代码解析：当HTML文档加载完毕后，先做一个判断，如果文章高度小于450px，那么就正常显示文章，展开收起按钮隐藏；如果文章高度大于450px，就将文章的高度设置为450px，展开收起按钮显示。接下来，如果文章的高度大于450px，初始状态为文章超出部分隐藏，点击按钮后，文章超出部分显示，同时按钮的状态改变。
这是对手机端文章显示和隐藏的一个总结，望多多交流。
浏览: 12068 次
来自: 广州
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)jquery 的slideUp函数是怎么取得元素的高度的？ 元素默认是display:none_百度知道
jquery 的slideUp函数是怎么取得元素的高度的？ 元素默认是display:none
slideup 就是animate 的高度改变
可以jq是怎么得到原来高度的
我试过隐藏后是没有offsetHeight和height属性的
我有更好的答案
slideUp取不到元素高度啊，只是让元素移上去。如果你元素是隐藏的，就是让它显示出来了，跟高度没什么关系。
为您推荐：
其他类似问题
您可能关注的内容
jquery的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。拒绝访问 | www.365mini.com | 百度云加速
请打开cookies.
此网站 (www.365mini.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(e24370-ua98).
重新安装浏览器，或使用别的浏览器}