<div class="wrap">
<a href="#" class="open">這是一個按鈕</a>
<div class="box box-dark"></div>
<div class="box box-danger"></div>
<div class="box box-warning"></div>
</div>
.wrap{
margin-top:10px;
margin-left:10px;
}
.open{
text-decoration: none;
border:1px solid black;
}
.box{
width: 100px;
height: 100px;
display: none;
}
.box-dark{
background-color: black;
}
.box-danger{
background-color: red;
}
.box-warning{
background-color: yellow;
}$(document).ready(function(){
$('.open').click(function(e){
e.preventDefault();
$('.box-dark').delay(0).slideDown();
$('.box-danger').delay(1000).slideDown();
$('.box-warning').delay(2000).show(0);
})
})
External CSS
This Pen doesn't use any external CSS resources.