我怎樣才能簡單地在表單上繞一個矩形？

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); 
    }); 
});​