cari

Rumah >hujung hadapan web >tutorial js >jQuery中slideUp()方法用法分析

jQuery中slideUp()方法用法分析

巴扎黑
巴扎黑asal
2017-06-29 11:30:111467semak imbas

这篇文章主要介绍了jQuery中slideUp()方法用法,以实例形式分析了slideUp()方法的功能、定义及具体使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery中slideUp()方法用法。分享给大家供大家参考。具体分析如下：

此方法通过高度变化（向上减小）来动态地隐藏所有匹配的元素，并且隐藏完成后还可以地触发一个回调函数。
slideUp()方法只调整元素的高度，可以使匹配的元素以“滑动“方式隐藏起来。

一.语法结构:
此方法可以规定动画效果持续时间，如果没有规定时间则使用默认值normal。例如:

代码如下:

$("p").slideUp(5000)

以上代码可以设置动画效果在5000毫秒(5秒)内完成。
此方法也可以在动画完成后触发一个回调函数。例如:

代码如下:

("p").slideUp(5000,function(){alert('向下滑动完成！')});

以上代码能够在动画完成以后触发回调函数，于是弹出一个提示框。
二.实例代码:

代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.jb51.net/" />
<head>
<style type="text/css">
p{
  
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(){
    $("p").slideUp(5000,function(){alert(&#39;向下滑动完成！&#39;)});
  })
})
</script> 
</head>
<body>
<p></p>
<button id="up">点击向上滑动</button>
</body>
</html>

在以上代码中，点击按钮，p会缓慢上拉，完成之后会弹出一个对话框。

Atas ialah kandungan terperinci jQuery中slideUp()方法用法分析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery.slideUp() 函数使用详解Artikel seterusnya：jQuery 的 slideUp 和 slideDown 动画效果的实现

Artikel berkaitan

Lihat lagi