<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
.con{margin:20px auto;text-align:center;}
.con p{display:inline-block;position:relative;cursor:pointer;width:20px;height:20px;}
</style>
</head>
<body>
<div class="con">
<p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
<p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
<p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
<p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
<div class="con">
<p>世</p><p>界</p><p>之</p><p>大</p><p>无</p><p>奇</p><p>不</p><p>有</p>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script>
var timer;
$(".con").find("p").hover(function(){
clear();
var $this=$(this);
timer=window.setTimeout(function(){
$this.animate({"top":"-10px"});
$this.prev().animate({"top":"-6px"});
$this.next().animate({"top":"-6px"});
$this.prev().prev().animate({"top":"-2px"});
$this.next().next().animate({"top":"-2px"});
},100);
},function(){
clear();
$(".con").find("p").animate({top:0});
});
function clear(){
clearTimeout(timer);
timer=null;
}
</script>
</html>
