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

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

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

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

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

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

HTML

view plainprint?

1. <div class="item">  
2. <img height="100" src="test.png" width="100">  
3.  <svg class="border" height="100" style="stroke-width: 10px;" width="100">  
4.   <path d="M0,0L100,0L100,100L0,100L0,0 z" fill="none" stroke="#ffd400"></path>  
5.  </svg>  
6. </div>  

JavaScript(jQueryを使ってます)

view plainprint?

1. $(".item").hover(function(){  
2.  $(this).find(".border").css("opacity", 1).animate({  
3.   "stroke-width": "10px"  
4.  });  
5. },  
6. function(){  
7.  $(this).find(".border").animate({  
8.   "stroke-width": "0px"  
9.  }, {  
10.   complete: function(){  
11.    //アニメーションが終わったら非表示  
12.    $(this).css("opacity ", 0);  
13.   }  
14.  });  
15. });  

$(".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を使ってやってみました
オンマウス時になめからなアニメーションで枠線を表示させる
--