2017/11/09

【jQuery Easing Plugin】エラー時の2つの対処法

Category

Javascript/ jQueryでのコーディング方法を公開しています

この記事は2017/11/09に公開した内容を2017/11/30に編集・追加しました。

【jQuery Easing Plugin】エラー時の2つの対処法

jquery.easing.jsを読み込んで、アニメーションのイージングの種類を増やそうとするとうまく動作しないケースがあります。

アニメーションが動かなかったり、他のjQueryのイベントが動作しなかったり、、、

クリックイベントで addClass removeClass を使ってのアニメーションや、slideToggleなどのイベントがうまく処理されないということもありました。

そんな時の対処法を2つほど。

 

jQuery Easing Plugin ってなに???

という方に、簡単にプラグインの説明。

普段から使いまくっている、という方は読み飛ばしてください。

jQueryのアニメーション系のイベントでは時間と、時間経過ごとの動きを変化させることができます。

イベントの時間は【duration】、時間経過ごとの動きの変化は【easing】というオプション名です。

durationの指定は簡単

  • 500 => 500m秒 つまり 0.5秒
  • 1000 => 1秒
  • fast => 適当に早い
  • slow => 適当に遅い

以下のように指定します。(jQeryを使って記述)

$(function(){
     $('.sampleA').click(function(){
          $(this).animate({left:"200px"},500);
     });
});

500の数字の部分が時間です。

ここを1000,fast,slowなどに書き換えると時間の長さ、つまりduration が変化します。

上記の例で説明すると、

CSSでsampleAクラスの親要素に【position:relative;】sampleAクラスに【position:absolute; left:0;】を指定していれば、

『sampleAというクラスのついた要素をクリックすると、0.5秒かけてleft0pxの位置から、left200pxの位置まで移動する。』

という処理になります。

そしてもう一つ指定できるのがeasingです。

アニメーションの時間が1秒でも初めの動きはゆっくりで徐々に速度が上がっていくのと、全ての動きが均等に動くのとではサイト訪問者に与える印象は全く違います。

ですがjQueryでデフォルトで指定できるeasingは、【linear】と【swing】の2種類のみです。

  • linear => 動きが均等・速度が変わらない・緩急がない・慣性の法則のような動き
  • swing => 始めは少し早く、終わりに近づくにつれゆっくりになっていく

この2つのeasingについてはそんなに大きく違いがありません。

特にこだわりがなければ、この2種類で大丈夫です。

が!!!

今やHTML5の時代です。

css3でアニメーションが作れますし、ニュースではAIがどうのと言っています。

そんな中で一辺倒なeasingを使っていると、デザイン面で劣勢になってしまいます。

WEB制作会社が増えた分、デザインはかっこよくて当たり前、多少マーケティングができて当たり前の時代です。

少しでもかっこいいホームページが作りたい!!動きもオシャレにしたい!!

easingもlinearとswingだけでは満足できない。

そんな時に使えるのがjQuery Easing Pluginです。

 

jQuery Easing Pluginでできること

デフォルトでは2種類のみのeasingの種類を、30種類追加してくれ、合計32種類まで使えるようになるプラグインです。

本当にたくさんの動きの変化をつけてくれます。

ダウンロードは以下から

jQuery Easing Plugin

下記のサイトで追加できる30種類の動きをグラフと動きで表してくれています。

Easing Function 早見表

選ぶ際にはぜひ参考にしてみてください。

 

jQuery Easing Pluginでエラーが出ている時にまず確認しておくべきこと

さあ、jQuery Easing Pluginの素晴らしさはわかってもらえたでしょうか。

ですが一つ問題があります。

それは自分が記述したjQueryとぶつかってしまい、うまく動作しないケースがあるということです。

特にWordpressでサイトを制作している時に、エラーが出やすい気がします。

ですので、その対処法をお伝えします。

エラーと呼べないほどの些細なミスをまずはチェック

エラーにはまってしまうと難しく考えすぎてしまって、基本的なミスにも気づきにくくなってしまいます。

まずは簡単なことからチェックしましょう。

ちゃんとjQueryは読み込めているか?

これは初歩中の初歩です。一応ですが確認しておきましょう。

実行したいスクリプトの前にjQueryを読み込んでいるか?

これも初歩中の初歩。先に読み込んでおかないとjQueryで記述した内容は全て動作しません。

ファイルのパスは合っているか?

これも初歩中の初歩ですが一応確認してみてください。

 

全て基本的なことですが、一応確認しておきましょう。

では以下からが本編です。

上記3点がしっかりできていることを確認できたら以下の対処法を試してみてください。

これでエラーが解消されなかったことはありません。

 

jQuery Easing Pluginでエラーが出た時の対処法

まずエラーが出ているので、どこでエラーが出ているのかを確認しましょう。

Javascript系のエラーの確認をするときはコンソールを見ます。

※ブラウザは Google Chrome を使用

右クリック > 検証 をクリック

すると下・右・左にサイトの内容を表すデべロッパーツールが出てきます。

その中の【console】という部分をクリックしてみてください。

エラーがあれば表示されると思います。

以下は jQuery Easing Plugin を使用して実際にエラーが出た時のconsole表示です。

見るからにエラー!!!という感じがしますね。赤だし、バツとか出てるし。

一行目の

jQuery.easing[jQuery.easing.def] is not a function 

という部分がjQuery.easingPluginでエラーが出ているということを示しています。

一行目の右側の【jquery.easing.1.3.js:47】 という部分がどのファイルの何行目でエラーが出ているかということです。

上記のconsole表示では、jquery.easing.1.3.jsというファイルの47行目でエラーが出ているので、何とかしてねってことです。

【対処法1】 $(function(){  });で囲って見る

jquery.easing.jsのスクリプトを見るとこんな感じです。。

jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},
                
 //この間にもたくさんeasingに関する記述がありますが長すぎるため割愛
	easeInOutBounce: function (x, t, b, c, d) {
		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
});

これを$(function(){});で囲ってあげましょう。

$(function(){
    jQuery.easing['jswing'] = jQuery.easing['swing'];

    jQuery.extend( jQuery.easing,
    {
	    def: 'easeOutQuad',
        	swing: function (x, t, b, c, d) {
	 	    //alert(jQuery.easing.default);
		    return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	    },
                
 //この間にもたくさんeasingに関する記述がありますが長すぎるため割愛
    	    easeInOutBounce: function (x, t, b, c, d) {
		    if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		    return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	    }
    });
});

これでオッケーです。

たくさんのコメントアウトがスクリプト内に記述されていますが、それは無視して上記のように囲ってあげてください。

【対処法2】 $ => jQuery に変更して見る

上記の方法でうまくいかない場合は自分の記述したスクリプトの『$』の部分を全て『jQuery』に書き換えてください。

例えば

$(function(){
     $('.js_event').on('mouseenter touchstart',function(){
         $(this).addClass('riri');
     });
});

このスクリプトの『$』を全て『jQuery』に書き換えると

jQuery(function(){
     jQuery('.js_event').on('mouseenter touchstart',function(){
         jQuery(this).addClass('riri');
     });
});

となります。

これで他のjQueryとぶつからなくなるので、正常に動作するようになります。

これぐらいの量のスクリプトであれば、手打ちで書き換えれますが、膨大な量のスクリプトを記述している場合は大変ですよね。

ですので、SublimeTextを使って一気に書き換える方法をご紹介します。

SublimeTextで一気に書き換える方法

Macでの操作方法で説明しますので、Windowsをお使いの場合は対応するコマンドに置き換えて実行してください。

Shift + command + F を押すとこのような画面になります。

検索と置換ができるようになります。

まずはこのFindの部分に『$』と入れると、スクリプト内の『$』が全て選択されます。

※ちなみに『Find』のボタンをクリックすると、スクリプト内の何行目のどの部分に『$』が使われているか抽出して表示してくれます。スクリプトが膨大な場合には一応確認しといたほうがいいかもですね。

次に『Replace』の部分に『jQuery』と入れてください。

ここまでの作業でこうなっていると思います。

あとは右下にある『Replace』のボタンをクリックすると、置換する部分が◯箇所ありますが置換しますか?的なアラートが立ち上がります。

『Replace』をクリックすると、この通り全てが置換されます。

書き換えることで、他のスクリプトに影響がないか、全ての処理が正しく動作しているかの確認もしましょう。

【おまけ】サイトを軽くしたい人のための jQuery Easing Plugin の導入方法

サイトを制作していると、表示スピードは大きな課題です。

jquery.easing.1.3.jsは8KBと非常に軽いので、特に意識しなくても大丈夫なレベルですが、できるだけ無駄を省きたいので下記のように記述しています。

自分のjavascriptを記述しているファイルにjquery.easing.1.3.jsから必要な部分だけをコピペするだけです。

easeInQuadとeaseOutQuadだけを使いたい場合の例

自分のスクリプトに以下のようにコピペして見てください。

$(function(){
     $('.sampleA').click(function(){
          $(this).animate({left:"200px"},500);
     });
}); 

//ここからjquery.easing.1.3.jsをコピペ
jQuery.easing['jswing'] = jQuery.easing['swing'];


jQuery.extend( jQuery.easing,
{
easeInQuad: function (x, t, b, c, d) {
		return c*(t/=d)*t + b;
	},
easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
});

//ここまで

これだけです。

これで easeInQuadとeaseOutQuad が使えます。

こうしておけばファイル容量も軽くなるし、スクリプトの読み込みも少なくなり、ファイルの管理もしやすくなります。

容量の面では大したことはありませんが(画像1枚で利用する容量よりもはるかに少ないので、、、)、無駄が嫌いで、SEO的に1KBでも軽くしておきたいという方は試して見てください。

 

コンテンツに関する質問やご要望は

Facebook

Twitter

より受け付けております。

お気軽にご質問ください。(内容によってはお答えできない場合もございます)

CONTACT

ホームページ制作 / グラフィック制作に関するご相談・無料お見積もり

ご相談・無料お見積もりはコチラ

ACCESS

ADDRESS

〒590-0103
大阪府堺市南区深阪南117番地 深阪矢谷ビル202号 営業時間 10:00-19:00 (土・日・祝定休)