[JS]jQuery fatNavの拡大縮小アニメーションを停止する方法｜jQueryプラグイン・ライブラリ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

スポンサード

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

以前にシンプルなフルスクリーンメニューの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;
}