オンマウス時に出す枠をSVGでなめらかに表示＆アニメーション

SONYのヘッドフォンのサイト見ていて、オンマウス時のアニメーションがなめらかで綺麗だったので、どうやってるのか調べてみた

見たサイト↓
http://discover.store.sony.com//piiq/

水色の枠はSVGで表示している。
FLASHなんかでは良くみる表現。

ボーダーをつけたdivをオンマウス時に縮小することで、枠を表示させてもいいんじゃないのと思ったけど、firefox7ではアニメーションがコマ落ちしてガタガタだった。

で、やりかた。
線の幅をアニメーションで変更してる。
線の幅は、線の中心から両方に広がっていくので、10pxの幅の線を出したい場合は、倍の20pxに設定すると、中心から外側と内側にそれぞれ10pxの線がでる。
外枠はoverflow:hiddenにしとかないと、外側の線まで出てしまうので注意。

HTML

JavaScript(jQueryを使ってます)

$(".item").hover(function(){
 $(this).find(".border").css("opacity", 1).animate({
  "stroke-width": "10px"
 });
},
function(){
 $(this).find(".border").animate({
  "stroke-width": "0px"
 }, {
  complete: function(){
   //アニメーションが終わったら非表示
   $(this).css("opacity ", 0);
  }
 });
});

SVGがつけるかどうかをJavaScriptで判定するなら→「SVGが使えるか判定する」(Raphael使ったほうがいいと思うけど…)

参考サイト：
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/paths.html



-- add 2012/12/16
Raphael.jsを使ってやってみました
オンマウス時になめからなアニメーションで枠線を表示させる
--