jQuery實時繪製邊框

Question

是否有人知道我可以使用的任何插件，它會逐漸在元素周圍繪製邊框實時？例如，它會給人一種印象，即某人實際上是在一個元素周圍繪製邊框，而不是一次只顯示一個邊框。

Answer 1

您可以以250毫秒的延遲或任何您想要的方式遞增地應用上邊框，右邊框，下邊框，左邊框。

Answer 2

HTML：

<div id="myelement"> 
    draw a border around this element 
</div> 

JS：

$.fn.border = function() { 
    var speed = 1000; 
    var borderWidth = 5; 
    var $el = $(this); 

    $el.css('position','relative'); 

    var $div = $('<div/>'); 

    $div.css('position','absolute'); 
    $div.css('top','-'+borderWidth+'px'); 
    $div.css('left','-'+borderWidth+'px'); 
    $div.css('border', borderWidth+'px solid black'); 
    $div.css('width','0px'); 
    $div.css('height','0px'); 
    $div.css('z-index','999'); 

    $el.append($div); 

    $div.animate({ 
     width: $el.outerWidth() + "px", 
     height: $el.outerHeight() + "px" 
    }, speed); 
}; 

$('#myelement').border(); 

工作樣本：http://jsfiddle.net/LSmQC/