<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<script src="js/jquery.js"></script>
<style>
.me{
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -75;
width: 400px;
height: 100px;
background-color: orange;
overflow: auto;
padding: 10px;
}
</style>
<script type="text/javascript">
//页面加载完成简写形式
$(function(){
//其他动画效果 slideUp slideDown 拉窗帘
//fadeOut fadeIn 渐出 渐入效果
$("#toggle").on("click",function(){
if($(".me").css("display")=="none")
{
//$(".me").css("display","block");//显示
$(".me").show(1000); //动画显示 元素
}
else
{
//$(".me").css("display","none");//隐藏
$(".me").hide(1000,function(){
alert("我隐藏起了!")
});//动画隐藏 元素 第二个参数 在执行完隐藏后执行
}
});
})
</script>
<body>
<button id="toggle">显示/隐藏</button>
<div class="me">
</div>
</body>
</html>
