JQuery 向下展开收起动画( slideDown(),slideUp() )

最新推荐文章于 2025-03-17 09:43:53 发布

houyanhua1

最新推荐文章于 2025-03-17 09:43:53 发布

阅读量1.2w

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/houyanhua1/article/details/78842556

版权

JQuery 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何利用JQuery的slideDown()和slideUp()方法实现元素的向下展开和向上收起动画效果，同时提到了slideToggle()方法作为展开收起的切换功能，动画时间为1000毫秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$('#div1').slideDown(1000); //向下展开，下拉。1000毫秒，表示动画展开过程时间。
$('#div1').slideUp(1000); //向上收起
$('#div1').slideToggle(1000); //合成展开收起

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>下拉收起动画</title>
	<style>
	#div1 {
		width:100px; height:100px;
		background-color:black;
	}
	</style>
    <script src="scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function() {
			//下拉按钮
            $('#btnSlideDown').click(function(){
				//$('#div1').slideDown();
				$('#div1').slideDown(1000);  //1000毫秒，表示动画下拉过程时间。
			});

			//收起按钮
			$('#btnSlideUp').click(function(){
				//$('#div1').slideUp();
				$('#div1').slideUp(1000);
			});

			//合成按钮
			$('#btnTotal').click(function(){
				//$('#div1').slideToggle();
				$('#div1').slideToggle(1000);
			});
        });
    </script>
</head>
<body>
    <input type="button" id="btnSlideDown" value="下拉"/>
    <input type="button" id="btnSlideUp" value="收起"/>
	<input type="button" id="btnTotal" value="合成"/>
	<div id="div1"></div>
</body>
</html>