[JS]jQuery fatNavの拡大縮小アニメーションを停止する方法

jQueryプラグイン・ライブラリ

2017.11.30

以前にシンプルなフルスクリーンメニューのjQueryプラグインjQuery fatNavの記事で紹介させていただいたjQuery fatNavで、ドロワーメニューの拡大縮小アニメーションをやめる方法のご紹介です。

制作案件でjQuery fatNavを使用した際に、別のjQueryプラグインとの兼ね合いでどうしてもメニューの拡大縮小のエフェクトを外さないといけなかったという事情があり…

だったらjQuery fatNavを使うなという話ですがww、案件の都合で仕方なかったのでカスタマイズしました。

jQuery fatNavの拡大縮小アニメーションを停止する

javascriptファイルの方を触ればいいのかと思っていましたが、cssファイル（jquery.fatNav.css）の方でアニメーションが指定されていました。

jquery.fatNav.cssの66行目にある.fat-nav要素のスタイルで、-moz-transform: scale(1.4);からtransition-duration: 0.4s;までの記述をコメントアウトします。

.fat-nav {
  top: 0;
  left: 0;
  z-index: 9999;
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);

  /*
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -webkit-transition-property: -webkit-transform;
  transition-property: transform;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  */

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.fat-nav {

top: 0;

left: 0;

z-index: 9999;

position: fixed;

display: none;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.8);

-moz-transform: scale(1.4);

-ms-transform: scale(1.4);

-webkit-transform: scale(1.4);

transform: scale(1.4);

-moz-transition-property: -moz-transform;

-o-transition-property: -o-transform;

-webkit-transition-property: -webkit-transform;

transition-property: transform;

-moz-transition-duration: 0.4s;

-o-transition-duration: 0.4s;

-webkit-transition-duration: 0.4s;

transition-duration: 0.4s;

overflow-y: auto;

overflow-x: hidden;

-webkit-overflow-scrolling: touch;

}

以下のページで、拡大縮小アニメーションのないjQuery fatNavによるデモページを用意しました。

jQuery fatNavデモ（拡大縮小なし）

なお、通常の拡大縮小アニメーションのあるデモは↓こっちになります。

jQuery fatNavのフルスクリーンメニューデモ