エフェクトの動きを変化させるjQueryのプラグイン「jQuery Easing Plugin」の使い方と動作

公開日：2014/10/09

jQuery イージングエフェクトプラグイン

エフェクトの動きを変化させるjQueryのプラグイン「jQuery Easing Plugin」の使い方と動作

jQueryを使用して制作していると「jQuery Easing Plugin」を使う機会あると思います。

「jQuery Easing Plugin」は様々なエフェクトの動きを設定することができるプラグインです。

jQueryのアニメーションの動作などを色々なパターンで設定することが可能です。

今回はjQueryのプラグイン「jQuery Easing Plugin」でエフェクトの動きを変化させた時の使い方と動作について記載いたします。

「jQuery Easing Plugin」の使い方

ダウンロード

下記より、jquery.easing.1.3.jsをダウンロードできます。

jQuery Easing Plugin

ファイル読込

jQueryとダウンロードしたjquery.easing.1.3.jsを読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.easing.1.3.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./jquery.easing.1.3.js"></script>

使い方

animateにイージングを使用した場合の例です。

$("要素").animate({プロパティ}, "スピード", "イージング");

1	$("要素").animate({プロパティ}, "スピード", "イージング");

下記は要素をクリックした際にアニメーションでイージング処理を使用してます。
※easeOutQuadを使用しています。

<script type="text/javascript">
$(function(){
	$(".btn").click(function(){
		$(".test").animate({width: "100%"}, 1000, "easeOutQuad");
	});
});
</script>