WEBOPIXEL

jQueryのanimateで自由にアニメーションできるようになろう

Posted: 2011.12.27 / Category: javascript / Tag: ,

jQueryにはアニメーションをするための機能がいろいろとありますが、ここでは「animate」メソッドの扱い方をご紹介いたします。

Sponsored Link

動かす前の準備

jQueryの前に動かす要素をhtml&cssで作成しておきましょう。

html

	<div id="box"></div>
	

css

	#box {
		width: 100px;
		height: 100px;
		background: #3399FF;
	}
	

jQueryコードを書くときの基本的な形は次のようになります。

javascript

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		//ここにjQueryのコードを書く
	});
	</script>
	

以降は「ここにjQueryのコードを書く」という部分にコードを書いていきます。

「animate」メソッドを使用した単純なアニメーション

最初はページが表示されたら右に「500px」スライドさせるだけのアニメーションです。

「animate」メソッドはこのように使います。

「animate」の基本的な書き方

ここでは作成した要素(#box)を右(margin-left)へ500xpスライドさせたいのでしたね。
これを先ほどの図にあてはめるとこうなります。

javascript

	$('#box').animate({
		'marginLeft': '500px'
	});
	

これで実行するとスライドしているはずです。簡単ですよね。
ちなみにcssでプロパティは「margin-left」と「-(ハイフン)」で句切られていますが、「animate」メソッドでは単語間の最初の文字を大文字にするキャメルケースという書式で記述します。
なので「margin-left」は「marginLeft」と書きます。

ここでは「marginLeft」を使用しましたが「fontSize」でも「width」でも数値で指定するようなパラメータならほとんどのものはアニメーションできます。

親要素を基点とする

posirionの設定がないと要素を配置した位置を基点としてアニメーションされるので、複数の要素を操作したいときは不便なときがあります。 そこで、jQueryという話ではないですが、複数の要素を同じ基点で動かす方法をご紹介します。

boxを2つにしたら「div」で囲みます。

html

	<div id="wrap">
	<div id="box1"></div>
	<div id="box2"></div>
	</div>
	

親にを「position: relative」にして、子は「position: absolute」を指定しましょう。

css

	#wrap {
		position: relative;
	}
	#box2,
	#box1 {
		position: absolute;
		width: 100px;
		height: 100px;
		background: #5EA9F4;
	}
	

これで「#wrap」を基点として、「left」や「top」で移動できるようになります。

javascript

	$('#box1').animate({
		'left': '500px'
	});
	$('#box2').animate({
		'left': '300px',
		'top': '200px'
	});
	

斜めに移動させる

斜めに移動させる

横にスライドさせるだけなら「left」を動かすだけでしたが、斜め下に移動する場合はどうしたら良いでしょうか?
はい。「left」と「top」を同時に動かせば良いですよね。
やり方は簡単ですプロパティと数値を1セットとして「,」で繋げていくだけです。

javascript

	$('#box1').animate({
		'left': '500px',
		'top': '300px'
	});
	

3つでも4つでもアニメーションさせたいパラメータをどんどん追加できます。

連続で移動させる

連続で移動させる

2つ指定すれば斜めに移動できることはわかったのですが、たとえば右に移動してから下に移動するといった処理はどうしたらいいでしょうか。
これはjQueryのメソッドチェーンという書き方をすれば簡単です。

javascript

	$('#box1')
		.animate({'left':'500px'})
		.animate({'top':'500px'})
		.animate({'left':'0px'})
		.animate({'top':'0px'});
	

このようにすれば上から順番にアニメーションが実行されます。

速度を調節する

「animate」メソッドは第2引数以降でオプションの設定をすることができます。
アニメーション速度を変更するには、第2引数に「slow」「normal」「fast」の文字列を指定するか、直接数値で指定します。

javascript

	$('#box1').animate({
		'left': '500px'
	}, 1500);
	

オプションは次のように記述することもできます。

javascript

	$('#box1').animate({
		'left': '500px'
	},{
		'duration': 1500
	});
	

動きに変化をつける(イージングの設定)

そのままだと一定の動きしかしないのでつまらないですが、イージングの設定をすれば「徐々に速くなる」などアニメーションに変化をつけることができます。
標準では「linear」と「swing」の2種類しかありませんが、「jQuery Easing Plugin」などを導入することでバリエーションが増えます。

javascript

	$('#box1').animate({
		'left': '500px'
	},{
		'duration': 600,
		'easing': 'linear'
	});
	

アニメーションが終わったあとに何かする

アニメーションが終了したら何か処理を実行したいといったケースはよくあります。
そんなときは「complete」オプションに関数を設定してあげます。

javascript

	$('#box1').animate({
		'left': '500px'
	},{
		'duration': 600,
		'complete': function(){
			alert('終わりました');
		}
	});
	

以上です。まだオプションなどあったりしますが、これだけでもいろいろできるのではないのかと思います。

参考サイト Effects/API/jQuery

COMMENTS

達也 2013-10-10 17:56 

動きに変化をつける(イージングの設定)
のやり方がわからないのでよろしければ教えてください。

すいません 達也ともうします 

 このサイトのおかげで
 基本動作は動かすことはできて、自分なりにプログラムを設定したのですが、
 それをやったら 自分の動きの変化がうまくいかなくなりました。
  よろしければ見て、アドバイスいただけますか よろしくお願いします

 これが自分で作って 動いた時のプログラムです

Insert title here

#wrap {

position: relative;

}

div #box2,#box1 {

position: absolute;
width: 100px;
height: 100px;
background: #5EA9F4;

}

$(function () {

setInterval(function(){
$(‘#box1’)

.animate({‘left’:’500px’})
.animate({‘top’:’500px’})
.animate({‘left’:’0px’})
.animate({‘top’:’0px’})

},1000);

setInterval(function(){
$(‘#box2’)
.animate({
‘left’: ‘800px’,
‘top’: ‘400px’
})

.animate({
‘left’: ‘0px’,
‘top’: ‘0px’
});

},10);

});

webOpixel 2013-10-15 11:13 

エラーは出ていないようですが、何がうまくいかないでしょうか?

達也 2013-10-16 11:10 

調べてくださってありがとうございます・
 
上のなら動いたのですが

setIntervalと easingを 入れたら動かなかったのですが・・・・自己完結しました。

suzuki 2014-07-15 10:42 

鈴木と申します。
教えて頂きたいのですが、トップページのanimateを使った単純なアニメーションができません。
cssファイルとjsファイルを外部化して、htmlファイルで読み込んでみたのですが、
■は表示されますが、まったく動きません。
jsファイルの内容は、
$(function() {
$(‘#box’).animate({
‘marginLeft’: ‘500px’

});

});

でよろしいでしょうか?
教えて下さい。

webOpixel 2014-07-16 11:53 

jQuery読み込んでいないということではないんですよね?

あとは他のスタイルの兼ね合いもあるかもしれません。cssで普通に「margin-left」で位置を調節できるか確認してみてください。

鈴木さんへ 2014-08-04 11:23 

marginLeftじゃ動きませんよ
margin-leftにすれば動くはずです

日にちもたってるようなので解決してるかもしれませんが、、、

webOpixel 2014-08-07 13:32 

cssの場合は「margin-left」で、
animateメソッドの場合は「marginLeft」のようにキャメルケースで書きます。
ちょっとややこしいですよね^^;

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。