我怎样才能简单地在表单上绕一个矩形？

Question

我想要做的是，当用户点击的东西：

<div id="FormContainer"> 
    <form> 
    ... 
    </form> 
</div> 

<a href="#" onClick="FlashElement()">Make it flash</a> 

这短暂闪烁的FormContainer内周围形成一个矩形。有什么办法可以做到这一点？

Answer 1

一个快速和简单的方法是将绘制彩色边框，然后在短时间之后将其删除：

function FlashElement() { 
    var $el=$('#FormContainer'), oldBorder=$el.css('border'); 
    $el.css({border:'4px solid yellow'}); 
    setTimeout(function() { $el.css({border:oldBorder}); }, 500); 
} 

如果你想有一个重复的闪烁效果，那么你可以多次调用“的setTimeout”躲/显示在所希望的时间间隔的边界，例如：

// ... 
    var newBorder = '4px solid yellow'; 
    $el.css({border:newBorder}); 
    setTimeout(function() { $el.css({border:oldBorder}); }, 100); 
    setTimeout(function() { $el.css({border:newBorder}); }, 200); 
    setTimeout(function() { $el.css({border:oldBorder}); }, 300); 
    setTimeout(function() { $el.css({border:newBorder}); }, 400); 
    setTimeout(function() { $el.css({border:oldBorder}); }, 500); 

Answer 2

使用animate功能与“颜色”插件组合。例如：http://jsfiddle.net/mostthingsweb/wjDJm/4/

HTML：

<div>my content</div> 

<br/> 
<button id='button'>Click me</button>​ 

CSS：

div { 
    padding: 3px; 
    border: 1px solid transparent; 
}​ 

JS：

function makeColors(color){ 
    return { 
     borderTopColor: color, 
     borderBottomColor: color, 
     borderRightColor: color, 
     borderLeftColor: color 
    } 
} 

$("#button").click(function() { 
    $("div").stop().animate(makeColors("red"), 1000, function(){ 
     $(this).animate(makeColors("transparent"), 500);   
    }); 
});​ 

备注：

• 通过CSS创建一个初始透明边框，以防止元素“跳跃”，这会在突然添加1px边框时出现。
• 需要的颜色插件：https://github.com/jquery/jquery-color

Answer 3

使用this plugin和下面的代码和here's the demo

$(function() { 
    $('div').on('click', function() { 
     $el = $(this); 
     $el.css({border:'1px solid #FFF'}); 
     $el.animate({ 
      'borderColor': '#F00' 
     }); 
     setTimeout(function() { 
      $el.animate({ 
       'borderColor': '#FFF' 
      }); 
     }, 1000); 
    }); 
});​