slideToggle()
通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<style>
div {
width: 200px;
margin: auto;
}
.HP_JQuery {
background-color: #ff0000;
}
.txt_content {
background-color: #00ffff;
}
</style>
<script src="../Scripts/jquery-1.11.3.js"></script>
<script>
$(function () {
//点击标题 显示与隐藏 文本内容
$("#cool .HP_JQuery").click(function () {
//用600毫秒缓慢的将段落滑上或滑下
$(".txt_content").slideToggle("slow");
});
});
</script>
</head>
<body>
<div id="cool">
<h4 class="HP_JQuery">什么是JQuery?</h4>
<div class="txt_content">
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
</div>
</div>
</body>
</html>
效果图:
点击“什么是JQuery?” 现实与隐藏 内容