<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Let's Have fun</h1>
<button class="btn btn-primary" id="btn1">按钮1</button>
<button class="btn btn-success" id="btn2">按钮2</button>
<button class="btn btn-info" id="btn3">按钮3</button>
<button class="btn btn-warning" id="btn4">按钮4</button>
</div>
<div class="row">
<div class="col-xs-3">
<div id="panel1" class="panel panel-primary">
<div class="panel-heading">
#panel1
</div>
<div class="panel-body">
content
</div>
</div>
</div>
<div class="col-xs-3">
<div id="panel2" class="panel panel-primary"style="display: none;">
<div class="panel-heading">
#panel2
</div>
<div class="panel-body">
content
</div>
</div>
</div>
<div class="col-xs-3">
<div id="panel3" class="panel panel-primary"style="display: none;">
<div class="panel-heading">
#panel3
</div>
<div class="panel-body">
content
</div>
</div>
</div>
<div class="col-xs-3">
<div id="panel4" class="panel panel-primary">
<div class="panel-heading">
#panel4
</div>
<div class="panel-body">
content
</div>
</div>
</div>
</div>
</div>
<!--01-->
<script type="text/javascript">
// $()进行取值
// function $(id){
// return document.getElementById(id);
// }
$(document).ready(function(){
//拿到panel1让它以300ms隐藏掉,再以1000ms展示出来
$('#panel1').hide(300).show(1000);
//拿到panel1让它以1s上去,再延迟1s,再以1s下来；
$('#panel1').slideUp(1000).delay(1000).slideDown(1000);
//fadeToggle(1000)渐入 可以获取当前的状态 fadeOut() fadeIn()
$('#panel1').fadeToggle(1000).fadeToggle(1000);
// 和.hide() .show()
$('#panel1').toggle(1000).toggle(1000);
//使用jQ增加css样式
$('#panel1').css({
color:'red',
fontweight:'bold',
display:'none'
});
$('#panel2').css({
// 增加透明度
opacity:'0.5'
})
})
</script>
</body>
</html>