jQueryでアニメーション：要素を動かす

作成日: 2014/10/07

更新日: 2018年4月13日

jQueryでアニメーションをする際、要素を動かすのは比較的分かりやすい効果かと思います。もちろん目的にあった実装でないと目障りになってしまう可能性もありますが、アニメーションっぽさはぐんと上がり作っている最中も楽しくなります。jQueryでの動きの実装は、基本的にレイアウトを徐々に変更するイメージのため、CSSと密な関係にあります。ブラウザ対応の問題もありますし、jQueryではなくCSSの設定が問題で動かないこともあります。jQueryの要素を動かす方法をまとめるために、徐々に更新していこうと思っています。
主流になっているCSS3のアニメーションについてを追記(2018/04/13)しました。

animateで要素を移動させる

jQueryでタグや画像を縦や横に移動する方法をご紹介します。基本的な動きになると思いますが、CSSプロパティの値を変更させてボックスをずらすイメージの場合がほとんどだと思います。そのため、jQueryの記述が間違っていて動かないわけではなく、CSSの指定により動かない場合があることにも注意が必要です。
デモ1

「animate」top,leftで移動する

jQueryの「animate()」を使い、topやleft(bottomやright)の値を変化させて移動させる方法です。この方法は一般的かと思いますが、注意点として動かしたいタグのCSSプロパティ「display」や「position」を確認する必要があります。aタグやspanタグといった、インライン要素に指定しても動かない場合があるので注意してください。また、「position:absolute」などの場合は、親要素(タグをくくっている親タグ)に対して、「position:relative」を指定します。
HTML

<div id="Case1Wrap">
<div id="Case1">ここのボックスが移動します。</div>
</div>

<div id="Case1">ここのボックスが移動します。</div>

</div>

CSS

#Case1Wrap{
	position:relative;
	/*ここからはデザイン*/
	width:600px;
	height:300px;
	background:#CCC;}
#Case1{
	position:absolute;
	width:100px;
	height:100px;
	/*ここからはデザイン*/
	top:0;
	left:0;
	background:#666;}

#Case1Wrap{

position:relative;

/*ここからはデザイン*/

width:600px;

height:300px;

background:#CCC;}

#Case1{

position:absolute;

width:100px;

height:100px;

/*ここからはデザイン*/

top:0;

left:0;

background:#666;}

jQuery

$(function(){
	$('#Case1').click(function(){
		$(this).animate({'top':'200px','left':'200px'},2000);
	});
});

$(function(){

$('#Case1').click(function(){

$(this).animate({'top':'200px','left':'200px'},2000);

});

「animate」margin,paddingで移動する

先ほどとは別に、マージンやパディングもanimate()が動作するので、それらを利用して動作させます。この場合、パディングは中身を広げるイメージなので、サイズが変わっていることにも注意してください。また、マージの場合はそれによって他の要素にも影響しますので、レイアウトにも注意が必要です。

HTML

<div id="Case2Wrap">
<div id="Case2">ここのボックスが移動します。</div>
</div>

<div id="Case2">ここのボックスが移動します。</div>

</div>

CSS

#Case2Wrap{
	/*ここからはデザイン*/
	width:600px;
	height:300px;
	background:#CCC;}
#Case2{
	/*ここからはデザイン*/
	width:100px;
	height:100px;
	background:#666;}

#Case2Wrap{

/*ここからはデザイン*/

width:600px;

height:300px;

background:#CCC;}

#Case2{

/*ここからはデザイン*/

width:100px;

height:100px;

background:#666;}

jQuery

$(function(){
	$('#Case2').click(function(){
		$(this).animate({'margin-left':'200px','padding-top':'200px'},2000);
	});
});

$(function(){

$('#Case2').click(function(){

$(this).animate({'margin-left':'200px','padding-top':'200px'},2000);

});

要素を回転させる

要素を回転させる方法として、CSS3のプロパティ「transform」の「rotate」を指定する方法がありますが、CSS3のため対応していないブラウザもあります。また、現在(2014.10.07)では「animate()」では対応していないので、一工夫が必要です。クロスブラウザ対応のjQueryプラグインもあるようですので使いやすいのを探してみてもいいかもしれません。
デモ2

「animate」stepを利用して、横に回転させる

少し調べてみると、プラグインを使用せずに回転させる方法が見つかりました。以下のページよりご確認できます。
参考サイト：http://www.softel.co.jp/blogs/tech/archives/4290

「setInterval」を利用して、横に回転させる

動作はほとんど同じですが、若干重い気もします。
HTML

<div id="Case4Wrap">
<div id="Case4">ここのボックスが回転します。</div>
</div>

<div id="Case4">ここのボックスが回転します。</div>

</div>

CSS

#Case4{ 
	width:100px;
	height:100px;
	/*ここからはデザイン*/
	background:#666;}

#Case4{

width:100px;

height:100px;

/*ここからはデザイン*/

background:#666;}

jQuery

$(function(){
var Case4Val = 10,
	Case4Num = 0,
	Case4Now = 0;
jQuery.fn.DoCase4 = function(config){
	return this.each(function(i, elem){
		Case4Num++;
		Case4Now++;
		$('#Case4').css({'transform':'rotate('+ Case4Val*Case4Num +'deg)'});
		if(Case4Now == 36){
			Case4Num = 0;
			Case4Now = 0;
			clearInterval(Case4Timer);
		}
	});
}
$('#Case4').click(function(){
	Case4Timer = setInterval(function(){$('#Case4').DoCase4()},10);
});

});

$(function(){

var Case4Val = 10,

Case4Num = 0,

Case4Now = 0;

jQuery.fn.DoCase4 = function(config){

return this.each(function(i, elem){

Case4Num++;

Case4Now++;

$('#Case4').css({'transform':'rotate('+ Case4Val*Case4Num +'deg)'});

if(Case4Now == 36){

Case4Num = 0;

Case4Now = 0;

clearInterval(Case4Timer);

}

});

}

$('#Case4').click(function(){

Case4Timer = setInterval(function(){$('#Case4').DoCase4()},10);

});

jQueryのアニメーションとCSS3のアニメーションについて

少し追記…jQueryのアニメーションとしてこの記事を投稿していますが、最近では既にCSS3の利用が普及しており、CSS3でアニメーションを行うのが主流になってきている印象があります。ブラウザ対応などに注意が必要ではありますが、現在ではモダンブラウザ + IE11 + スマホに対応していればOKのような風潮があります(もちろんクライアントワークでは確認は必要ですが)。
CSS3のアニメーションにはいくつか種類があるのですが、要素自体を動かすだけならばCSS3で完結してしまいます。しかし他の要素をクリックした時にアニメーションさせるなど、複雑な処理を行いたい場合にはjavascriptの力は必要になってきます。
以下のような流れになります。

1) CSS3で特定のclassに対してアニメーションの記述
2) ユーザーが要素をクリック
3) javascriptでclassをつける
4) classに設定したアニメーションが実行

CSS3で完結する例

要素Aをマウスオーバーした時に要素Aをアニメーション
要素Aを無限にアニメーション

CSS3とJavascriptが必要な例

要素Bをクリックした時に要素Aをアニメーション
ページが完全に読み込まれた後に要素Aをアニメーション

CSS3( + jquery )でアニメーション | 記事 | ShitTakaBull より:

2018年4月13日 4:50 PM

[…] 述しておきます。一時期まではアニメーションと言えばjQueryというほど、jQueryのanimate()を利用してアニメーションするのが流行りましたが、CSSでアニメーションする方が多くなってきて […]

返信

jQueryでアニメーション：要素を動かす