【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など、見た目にあまり影響を及ぼさないプロパティを使います。

 

js.studio-kingdom.com