您的位置：首页 > Web前端 > JQuery

jQuery基础----09jQuery效果-滑动

2015-08-16 14:50 585 查看

<!DOCTYPE html>
<!--jQuery效果-滑动-->
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.min.js"></script>
<script src="js09.js"></script>
<style>

#neirong,#xianshi ,#yincang,#xianshiyincang{
padding: 5px;
/*文字居中*/

text-align: center;
background-color: aquamarine;
border:solid 2px cornflowerblue;

}

#neirong {
padding: 50px;
/*隐藏*/
display: none;

}

</style>

</head>
<body>
<div id="xianshiyincang">显示/隐藏</div>
<div id="xianshi">显示</div>
<div id="yincang">隐藏</div>
<div id="neirong">内容</div>
</body>
</html>
js:

/**
* Created by hao on 2015/8/15.
*/
//文档加载完毕，出发的函数
$(document).ready(function(){
//p元素点击事件，点击当前p元素隐藏
$("#xianshi").click(function(){
$("#neirong").slideDown(500);
});
$("#yincang").click(function(){
$("#neirong").slideUp(500);
});
$("#xianshiyincang").click(function(){
$("#neirong").slideToggle(300);
});
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航