jQuery实时绘制边框答案

【问题标题】：jQuery draw a border in real timejQuery实时绘制边框
【发布时间】：2014-01-31 15:08:57
【问题描述】：

有谁知道我可以使用的任何插件可以实时逐渐在元素周围绘制边框？例如，它给人的印象是某人实际上是在一个元素周围画了一个边框，而不是一次全部出现。

【问题讨论】：

看看这个，可能会有帮助stackoverflow.com/questions/10138118/…
要清楚，您想为绘图设置动画吗？如果是这样，您可以使用 jquery "animate" 方法..

标签： javascript jquery html real-time

【解决方案1】：

您可以以 250 毫秒的延迟或任何您喜欢的方式逐步应用上边框、右边框、下边框、左边框。

【讨论】：

（我需要再等9分钟才能接受你的回答，我没有忘记！）
别担心老兄，周末愉快。

【解决方案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/

【讨论】：