先引入本地jq库，
鼠标经过效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>delay()动画延迟 </title>
</head>
<body>
<style>
*,ul{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul{
list-style-type: none;
}
.box{
width: 900px;
overflow: hidden;
margin: 100px auto;
padding: 10px;
background: #000;
}
.box ul{
overflow: hidden;
}
.box ul li{
float: left;
width: 280px;
height: 280px;
margin-left: 10px;
background: #000;
position: relative;
}
.box ul li span{
position: absolute;
}
.top,.bottom{
/*width: 100%;*/
border-bottom: 1px solid blue;
}
.top{
top: 0;
right: 0;
}
.bottom{
bottom: 0;
left: 0;
}
.left,.right{
/*height: 100%;*/
border-left: 1px solid blue;
}
.left{
top: 0;
left: 0;
}
.right{
right: 0;
bottom: 0;
}
</style>
<div>
<ul>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
</div>
</body>
<script src="jquery.min.js"></script>
<script>
$(".box li").hover(function(){
$(this).children('.top').delay(600).stop(true).animate({
"width": "100%"
},400).siblings('.left').delay(1000).stop(true).animate({
"height": "100%"
},400).siblings('.bottom').delay(600).stop(true).animate({
"width": "100%"
},400).siblings('.right').delay(1000).stop(true).animate({
"height": "100%"
},400)
},function(){
$(this).children('.top').delay(600).stop(true).animate({
"width": "0"
},400).siblings('.left').delay(1000).stop(true).animate({
"height": "0"
},400).siblings('.bottom').delay(600).stop(true).animate({
"width": "0"
},400).siblings('.right').delay(1000).stop(true).animate({
"height": "0"
},400)
})
</script>
</html>