<!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>