一、jQuery SlideUp介绍
jQuery是一个快速、简洁的JavaScript框架，它的优势就在于它的轻量级、简洁明了的语法以及操作DOM的便捷方式。其中，jQuery中的slideUp()方法就是其中一个强大的方法，用于隐藏（收起）元素。该方法可以通过设置速度参数来控制隐藏/收起的速度。
二、jQuery SlideUp方法的基本操作
1、基本结构：
$('selector').slideUp(speed,callback);
其中，参数speed控制滑动速度，单位是毫秒，callback用于在动画结束后执行的函数。当然，callback是可选项，我们可以省略它。
2、使用样例：
$(document).ready(function() {
$("button").click(function() {
$("p").slideUp();
});
});
该段文字可以向上收起。
当点击’向上收起’按钮时，页面上的段落元素将会向上收起并隐藏。
三、jQuery SlideUp实用技巧
slideup()方法的实用技巧有很多，接下来将会介绍三个有用的技巧：控制速度、动画回调函数、多个元素的切换。
1、控制速度
在slideUp()方法中可以设置speed参数调整滑动速度，具体的使用方法已经在前面的例子中提到过了。代码示例：
$(document).ready(function() {
$("button").click(function() {
$("p").slideUp(5000);
});
});
2、动画回调函数
在slideUp()方法中，动画回调函数指的是在动画完成后需要执行的函数。如下所示：
$(document).ready(function(){
$("button").click(function(){
$("p").slideUp(2000,function(){
alert("向上滑动完毕后再弹出一个提示");
});
});
});
3、多个元素的切换
可以通过切换多个元素来改变页面的显示效果。代码示例：
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("slow");
});
});#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}#panel {
padding: 50px;
display: none;
}点击展开/收起
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/252113.html
微信扫一扫 
支付宝扫一扫 