【jQuery】animateで、拡大縮小する
jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできません。
なので、
>||
$("#img").animate({
transform: 'scale(2)'
});
||<
と書いても「scale(2)」は数値ではないので、拡大されません。
こういう時は、animateのstepを用いて、以下のように書きます。
$( "#img" ).animate({
margin: '2px'
},{
duration: 1500,
step: function( now, fx ){
if( fx.prop == "margin"){
$("#img").css({ transform: 'scale(' + now + ')' });
}
}
});
例えば倍率を、1から2に変化させたいのであれば、marginにあらかじめ1pxを設定し、それをanimateで2pxまで変化させます。そのmarginの変化していく値を、scaleに設定します。
marginを使えない場合は、paddingなど、見た目にあまり影響を及ぼさないプロパティを使います。