📌  相关文章
📜  jQuery | slideUp() 与示例(1)

📅  最后修改于: 2023-12-03 14:43:15.772000             🧑  作者: Mango

jQuery | slideUp() 与示例

jQuery是一种流行的JavaScript库，其中包含许多方便的功能，如选择元素、操作DOM、事件处理和动画。 jQuery的slideUp()方法是一个用于向上滑动元素的动画效果的方法。

功能

slideUp()方法用于向上滑动元素。该方法可以接受两个参数：duration和callback函数。duration参数指定动画的持续时间，单位为毫秒。callback函数将在动画完成后执行。

示例

下面是一个示例代码段，演示了如何使用slideUp()方法来向上滑动HTML元素：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery slideUp() Method</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style type="text/css">
		#box {
			background-color: #f2f2f2;
			border: 1px solid black;
			height: 100px;
			padding: 10px;
			margin: 10px;
			overflow: hidden;
		}
	</style>
</head>
<body>

	<div id="box">
		<p>Hello world!</p>
		<button id="btn">Slide Up</button>
	</div>

	<script type="text/javascript">
		$(document).ready(function(){
			$("#btn").click(function(){
				$("#box").slideUp(1000, function(){
					alert("Slide Up Completed!");
				});
			});
		});
	</script>

</body>
</html>

在这个示例中，我们使用jQuery库从远程源加载了该库的版本。我们使用CSS样式定义一个具有背景颜色和边框的

元素。我们在
元素中放置了一个

标签和一个