<Jquery>一个简单的切换与滑动效果

最新推荐文章于 2021-06-30 11:52:35 发布

原创最新推荐文章于 2021-06-30 11:52:35 发布 · 840 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #xhtml #html

Javascript/Jquery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的jQuery示例，通过点击按钮使一个隐藏的面板以滑动方式显示或隐藏，展示了基本的jQuery选择器及动画效果。该示例包括了完整的HTML页面结构、引入jQuery库文件以及具体的JavaScript代码实现。

以下是代码部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery</title>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#test").click(function(){
			$("#pannel").slideToggle(500);
		});						
	});
</script>
</head>

<body>
<div id="pannel" style="background:#F30; width:600px; height:200px; display:none; ">
  <p align="center">XXXXXX第一行XXXXXX</p>
  <p align="center">XXXXXX第二行XXXXXX</p>
  <p align="center">XXXXXX第三行XXXXXX</p>
</div>
<div id="test" style="background:#F66; width:600px; height:30px;">
  <p align="center">点击向下</p>
</div>
</body>
</html>

以下是效果图片显示：

1、