如何使用jQuery動畫邊框繪圖？

Question

我想提請在我上懸停鏈接的邊框，動畫水木清華這樣http://d2fhka9tf2vaj2.cloudfront.net/tuts/152_QTiPad/Milestones/JavaScriptWebsite.html

請給我一些片段或鏈接。

謝謝

這是我試圖用jQuery

 $('a').on('hover', function() { 
      $(this).animate({ border: '1px' }, 'slow', 'linear'); 
      $(this).animate({ border: 'solid' }, 'slow'); 
      $(this).animate({ border: '#ccc' }, 'slow'); 
     }); 

Answer 1

OK動畫，所以我檢查了現場，看來他們使用的是自定義動畫處理。 這裏，這是處理所有自定義動畫的外部js文件。

Custom Handler

現在你所要做的就是爲每一行創建多個div。然後以您想要的方式自定義它。如果你想擁有完全相同的look-

對於水平的div，

position:absolute; 
border-bottom: 1px; 
width: 0px; 
height: 0px; 
border-bottom-color:#000; 
border-bottom-style:solid; 

對於垂直的div，只是改變border-bottom到border-left。

現在jQuery的，我會盡力解釋的自定義處理程序是如何工作的，如果你直接婉複製粘貼，

Here you go。

首先定義要進行動畫處理的股利，$fx('#theHeader1')那麼你添加的參數製作動畫作品.fxAdd({type: 'width', from: 0, to: 770, step: 10, delay: 10})，這裏 -

• 類型：可同，高度，左，上你要改變
• 來自：值從
• 開始：價值高達
• 步驟：描述速度（應該是否定的，如果從大的值要小的值）
• 延遲：我想其smoothness.Without延緩它出現馬車。

只是說：讓那種動畫將需要大量的時間。

Answer 2

如果你不知道像這樣:)

$("#block").mouseenter(function(){ 
$("#span1,#span2,#span3,#span4").show(); 
$("#span1").animate({ 
height: "50px" 
}, 1500); 
$("#span2").animate({ 
width: "110px" 
}, 1500); 
$("#span3").animate({ 
height: "55px", 
    top:"-5px" 
}, 1500); 
$("#span4").animate({ 
width: "105px", 
left:"-5px" 
}, 1500); 
}); 

$("#block").mouseleave(function(){ 
$("#span1").animate({ 
height: "5px" 
}, 1500); 
$("#span2").animate({ 
width: "5px" 
}, 1500); 
$("#span3").animate({ 
height: "5px", 
    top:"50px" 
}, 1500); 
$("#span4").animate({ 
width: "5px", 
left:"100px" 
}, 1500,function(){ 
$("#span1,#span2,#span3,#span4").hide(); 
}); 

}); 

見琴：Click me

Answer 3

您可以檢查使用該pen.the技術是CSS過渡，沒有jQuery的參與 什麼你需要的就像tannerjohn說的，按鈕的每一邊有一個div

http://codepen.io/ASidlinskiy/pen/xeBiq?editors=110

HTML：

<div class="main"> 
        <div class="button"> 
         <a href="javascript:void(0)">enter</a> 
         <div class="line-top">&nbsp;</div> 
         <div class="line-right">&nbsp;</div> 
         <div class="line-bottom">&nbsp;</div> 
         <div class="line-left">&nbsp;</div> 
       </div>  
      </div> 

CSS：

.button{ 
      position: absolute; 
      top: 50%; 
      left: 50%; 
      width: 120px; 
      height: 40px; 
      margin: 70px 0 0 -60px; 
      border: 1px solid rgba(255,255,255,0.25); 
     } 
.button .line-top{ 
      position: absolute; 
      top: -1px; 
      left: -1px; 
      width: 0; 
      height: 1px; 
      background: rgba(255,255,255,1); 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 
     .button .line-right{ 
      position: absolute; 
      bottom: 0; 
      right: -1px; 
      width: 1px; 
      height: 0; 
      background: rgba(255,255,255,1); 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 
     .button .line-bottom{ 
      position: absolute; 
      bottom: -1px; 
      right: -1px; 
      width: 0; 
      height: 1px; 
      background: rgba(255,255,255,1); 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 
     .button .line-left{ 
      position: absolute; 
      top: 0; 
      left: -1px; 
      width: 1px; 
      height: 0; 
      background: rgba(255,255,255,1); 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 
     .button:hover .line-top{ 
      width: 122px; 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 
     .button:hover .line-right{ 
      height: 40px; 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 
     .button:hover .line-bottom{ 
      width: 122px; 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     } 
     .button:hover .line-left{ 
      height: 40px; 
      -webkit-transition: all 0.5s ease-in-out; 
      -moz-transition: all 0.5s ease-in-out; 
      -o-transition: all 0.5s ease-in-out; 
      transition: all 0.5s ease-in-out; 
     }