<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .border_animation{position:relative;272px;height:182px;margin:50px auto; /*border:1px solid black;*/} .border_animation .img_wrap{270px;height:180px;border:1px solid #eee} .border_animation .border_top{position:absolute;height:1px;0;font-size:0;background:#000;top:0;left:0;} .border_animation .border_right{position:absolute;height:0px;1px;font-size:0;background:#000;bottom:0;right:0;} .border_animation .border_bootom{position:absolute;height:1px;0px;font-size:0;background:#000;right:0;bottom:0;} .border_animation .border_left{position:absolute;height:0px;1px;font-size:0;background:#000;left:0;top:0;} </style> </head> <body> <div class="border_animation"> <div class="border border_top"></div> <div class="border border_right"></div> <div class="border border_bootom"></div> <div class="border border_left"></div> <div class="img_wrap"> <a target="_blank" href="#"> <img width="270" height="180" src="qq.png" /> </a> </div> </div> <script src="jquery.js"></script> <script> $(function(){ $(".border_animation").hover( function(){ $(".border_top").animate({'width':'272px'},500); $(".border_right").animate({'height':'182px'},500); $(".border_bootom").animate({'width':'272px'},500); $(".border_left").animate({'height':'182px'},500); }, function(){ $(".border_top").animate({'width':'0'},500); $(".border_right").animate({'height':'0'},500); $(".border_bootom").animate({'width':'0'},500); $(".border_left").animate({'height':'0'},500); }) }); </script> </body> </html>