jQueryゼロから / scale(画像を拡大縮小する)

scaleって意外にも無いんだけどね…
chrome / safari (あと多分IE) だと CSS で zoom プロパティで出来るみたい。

2011.07.17追記
CSS3のtransform使う場合はこちらを参照

1
2
3
img.zoom {
    zoom: 1.8;
}

だけどなるべくクロスブラウザで、と思ったので width / height で何とかならんかなと試してみた。

1
$('#target').css({ width: 58, height: 58 });

jQueryのcssでプロパティを直接いじるのだが、width, height は 180% とか指定できないのね。
なので、直接画像サイズを指定しました。(画像サイズ 32px × 1.8 ≒ 58px)

んで、結局何がやりたかったのかというと、オンマウスでぷるんと出来んかなと。
width / height をいじると画像の左上を原点として拡大するので、同時にtop / left もいじることに。
位置調整用に<span>とか何かしらのタグで囲いつつ、position: relative にしておいてください。

1
2
3
4
5
6
7
8
9
10
11
var option = { duration: 'fast', easing: 'easeOutElastic' };
$('#target').hover(function(){
  $(this).animate({ top: -13, left: -13 }, option)
         .find('img').animate({ width: 58, height: 58 }, option);
}, function(){
  $(this).stop(true, true)
         .css({ top: 0, left: 0 })
         .find('img')
         .stop(true, true)
         .css({ width: 32, height: 32 });
});

ユーザが素早い動き出来る場合は stop は必須ですね。(stopについてはこちらのサンプルにある追記部分を参照下さいませ)
じゃないと、アニメーションとリセットのタイミングがずれて、マウスを外したのに大きいままになっちゃったり。

それからアニメーションは jQuery デフォルトだと swing か linear しかないので、下記のアニメーション用プラグイン使いました。
jQuery Easing Plugin
jQuery Easing – jQuery 日本語リファレンス (動きの確認はこちらが参考になります)

あとは細かい数字を補足しておくと、animate に渡している width / height の 58px は、元画像 32px を約1.8倍したものですね。(1.8倍の根拠は無いです。最初の zoom で適当に 1.8 としたので…)
んで、top / left の -13px は画像の拡大が画像左上を基準にしてるので、画像の中心で拡大しているように見せかけるためです。
拡大前後の差から (58 – 32) / 2 = 13 なので、上方向、左方向に位置をずらしてます。
このとき動きがおかしくならないよう、拡大と移動の両方のアニメーションに同じ動きを指定するようにしてます。(変数 option で同じものを指定)
mouseleave は単に元の位置 (0, 0) と元のサイズ (32, 32) に戻してるだけです。
この辺は、デザインによっていろいろ変わるので調整するといいと思います。

サンプル

2011.07.17追記
CSS3のtransformを使用する場合は下記参照
Transform / 回転・拡大縮小