border animate (hover)

HTML如下：

<section class="box">
     <div class="boALL"></div> <!-- all borders -->
<div class="boTop"></div><!-- 上 -->
<div class="boRight"></div><!-- 右 -->
<div class="boBottom"></div><!-- 下 -->
<div class="boLeft"></div><!-- 左 -->   
  <a href="javascript: void(0)" class="txt">HOVER HERE</a>
</section>

css setting：

.box {

   display: inline-block;
   width: 200px;
   height: 60px;
background-color: #999;
   position:absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
text-align: center;
line-height: 60px;
   transition: background-color .7s;

}

.box:hover {

background-color: #abc;
transition: background-color .3s .7s;

}

.txt {

  position: absolute;
  color: #f30;
  font-size: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;

}

.boALL {

   position: relative;
   width: 100%;
height: 100%;
overflow: hidden;  /*怕自己定位失誤*/

}

.boTop {   /*上*/  
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #fa0;

}

.boRight {   /*右*/  
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 0;
  background-color: #fa0;

}

.boBottom { /*下*/
   position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 3px;
background-color: #fa0;

}

.boLeft {   /*左*/  
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3px;
  height: 0;
  background-color: #fa0;  

}

jq 語法如下：

$(function(){
var per = 100 + '%';      //100%

$('.txt').hover(
     function(){
        $('.boTop').stop(true,false).animate({width: per},500);
        $('.boBottom').stop(true,false).animate({width: per},500);
        $('.boLeft').stop(true,false).delay(500).animate({height: per},200);
        $('.boRight').stop(true,false).delay(500).animate({height: per},200);

},

function(){
$('.boLeft').stop(true,false).animate({height: '0px'},200);
$('.boRight').stop(true,false).animate({height: '0px'},200);
$('.boTop').stop(true,false).delay(200).animate({width: '0px'},500);
       $('.boBottom').stop(true,false).delay(200).animate({width: '0px'},500);

}

)

})