要素の中心から拡大するようなアニメーションをjQueryを使って再現してみる

「要素の中心から拡大するようなアニメーション作ってください」さてどうする

どういうことかというと、

CSS3を使えばtransform-orignを50% 50%にすることで
変形の中心点をすらすことができるので、
これとtransitionやanimationプロパティを組み合わせれば
簡単に実現出来ますね！

tags:

「IEで動きませけんど…」

そうでした。
IEを忘れていました。
transitionやanimationはIE10からしか使うことができませんので、
動かすことが必須の場合はこの方法では利用できませんね。

JavaScriptの力を借りましょう

jQueryにはshow()やanimate()という便利なメソッドが用意されています。
これらを使いましょう。

今回は、CSSで予めdisplay:none、widthとheightを0にしておいて、 animation()でもとのサイズに戻しましょう。

やったできました！

「中心点から」ですよ…話聞いてます？

えっ。ははは、いやだなーごませるなんて思ってないですよー

右下に拡大しているのであれば初期位置をずらせばいい

つまり

右下に拡大されているのであれば、 最初の位置を拡大分右下に配置しておいて、
アニメーション終了時に元の位置に戻す、
といったことを行なってあげれば擬似的ではありますが
中心点から拡大しているようにみせることが可能になります。

今回の場合はposition:relativeを設定して、
要素の半分の50pxをtopとleftプロパティに設定して、
それらをanimationで0まで戻してあげるようにしました。

  $(function(){
      $('.box').show().animate({
          top: 0,
          left: 0,
          width: '100px',
          height: '100px'
    }, 500);
  });