• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2012/12/11

jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた

121211
様々な効果でWebページのUIをリッチにしてくれるjQuery
今回は、そのjQueryのエフェクト動作を加速/減速させるためのプラグイン、「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを(自分用に)作ってみましたのでシェアしておきます。

「jQueryってなんじゃらほい」という方は先日書きました7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座をご一読ください。分かりやすいと僕の中で大評判です。


easingとは、エフェクトの動きを加速/減速させるための関数です。
(中略)特別なことをしなくても使うことの出来るeasingは”linear”と”swing”の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。
このeasingプラグインでは、version 1.3時点で32パターンが提供されています。

via: jQuery Easing – jQuery 日本語リファレンス

上記の通り「easing」とはエフェクトの動きの速度を変化させるための関数なのですが、もともと、jQueryには「swing(徐々に加速して最後はゆっくり:デフォルトではこれ)」と「linear(完全な等速移動)」の2種類しか用意されておりません。
どのように使うのかというと…

$(function(){
	$(".hoge").click(function(){
		$("this").animate({
			"marginLeft":"100px"},2000,"linear")
	});
});

例えばこのように記述することで、.hogeをクリックするとその要素が「2秒」かけて「等速移動で」右に100px動く、と言うような感じになります。そんな感じになるのです。
先述の通り、デフォルトでは「swing」「linear」の2種類しか使えないエフェクトですが、jQuery Easing Pluginを利用することにより合計33種類もの関数が使用出来るようになります。

jQuery Easing Pluginの使い方

では簡単にjQuery Easing Pluginの使い方をば。

 

Skitched 20121211 012707
まずは、jQuery Easing Pluginのページよりプラグインをダウンロード、サーバにアップしたらheadタグ内に下記のように記述します。

<head>
(中略)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
(中略)
</head>

すると、リファレンスページにあるような30数種類のエフェクトを使用出来るようになるのです:)

$(function(){
	$(".hoge").click(function(){
		$("this").animate({
			"marginLeft":"100px"},2000,"easeInCubic")
	});
});

こんな感じですね。easingエフェクトは.animateメソッドと併用することが多いので覚えておきましょう。

エフェクトのサンプル作ってみた

さて、30種類もあるエフェクトを全て覚えることなど出来ません。
始めは先ほどのリファレンスページをクリックしながら効果を見つつエフェクトを選んでいたのですが、先日DLした「Sublime Text 2」でコーディングを試してみたかったので「jQuery Easing Plugin」のエフェクト全種類まとめページを作ってみました:)

よろしければエフェクトの確認に使ってみてください。

 

そんなわけで、jQuery Easing Pluginの使い方と、全エフェクトの一覧ページのご紹介でした。
ちょっとリッチなエフェクトをつけてみたい!と言う方は是非試してみませう:)

7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×