第八周学习笔记

最新推荐文章于 2024-08-18 18:00:00 发布

Malfoides

最新推荐文章于 2024-08-18 18:00:00 发布

阅读量67

点赞数

分类专栏： HTML简单网页实操笔记文章标签： jquery

本文链接：https://blog.csdn.net/Malfoid/article/details/117961991

版权

HTML简单网页实操笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、jQuery的效果滑动
二、slideDown、slideUp、slideToggle的使用

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、jQuery的效果滑动

jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()

二、slideDown、slideUp、slideToggle的使用

1、slideDown

代码如下：

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:100px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我滑面板</div>
<div id="panel">看到我啦</div>

</body>

2.jQuery slideUp

代码如下：

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
}
</style>
</head>
<body>
 
<div id="flip">拉起面板</div>
<div id="panel">看到我啦!</div>

</body>

3.jQuery slideToggle

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>