プログラミング

jQueryの基本的なアニメーションメソッドとそれぞれの効果

フェードインやフェードアウトなど、jQueryで用意されている基本的なアニメーションメソッドには、以下のようなものがあります。

show 要素を徐々に表示する
hide 要素を徐々に非表示にする
toggle 要素を交互に表示・非表示にする
fadeIn 要素をフェードインで表示する
fadeOut 要素をフェードアウトで非表示にする
fadeTo 要素を指定した透明度に徐々に変更する
slideDown 要素をスライドしながら表示する
slideUp 要素をスライドしながら非表示にする
slideToggle 要素をスライドしながら交互に表示・非表示にする
animate 独自のアニメーションで変更する
$(対象の要素).アニメーションメソッド(時間)

対象の要素とアニメーションメソッド、そしてアニメーションのスピードを指定しますが、アニメーションの時間はミリ秒もしくは、「slow」、「normal」、「fast」などを指定します。

要素を徐々に表示・非表示にする

要素を徐々に表示させたり、非表示にしたりするときに使える基本的なアニメーションメソッドには、「show」と「hide」があります。

また、「toggle」を使えば表示・非表示の切り替えが簡単にできます。

show

「show」は要素を徐々に表示させるアニメーションメソッド。

非表示になっている要素を徐々に表示の状態にし、高さや幅は0から本来のサイズに変化させていきます。

hide

一方「hide」は「show」の反対で、要素を徐々に非表示にしていくアニメーションメソッドです。

本来のサイズから高さや幅は0になっていきます。

See the Pen show-hide by KUBO (@KUBOGEN) on CodePen.

HTML
<button class=”show”>表示</button>　<button class=”hide”>非表示</button>
<div id=”box”></div>
CSS
#box {
　width: 100px;
　height: 100px;
　background: red;
　margin-top: 30px;
　display: none;
}
JavaScript
$(function() {
　$(‘.show’).click(function() {
　　$(‘#box’).show(3000);
　});
});
$(function() {
　$(‘.hide’).click(function() {
　　$(‘#box’).hide(3000);
　});
});

toggle

「toggle」は要素を交互に表示させたり非表示にさせたりすることができるアニメーションメソッド。

要素が表示されている場合は非表示になりますし、非表示になっている場合は表示に切り替わるので便利です。

「show」と「hide」で2つに分けていたボタンも、「toggle」なら1つのボタンで実装できます。

See the Pen toggle by KUBO (@KUBOGEN) on CodePen.

HTML
<button class=”toggle”>表示・非表示</button>
<div id=”box”></div>
CSS
#box {
　width: 100px;
　height: 100px;
　background: red;
　margin-top: 30px;
}
JavaScript
$(function() {
　$(“.toggle”).click(function() {
　　$(“#box”).toggle(3000);
　});
});

フェード系アニメーションメソッド

フェード系のアニメーションメソッドには、「fadeIn」、「fadeOut」、「fadeTo」などがあります。

fadeIn

「fadeIn」は、高さや幅は本来のサイズのままで、要素を徐々にフェードインで表示させるアニメーションメソッドです。

fadeOut

そして「fadeOut」はその反対の働きをする命令なので、徐々にフェードアウトしながら非表示になります。

See the Pen fadeIn-fadeOut by KUBO (@KUBOGEN) on CodePen.

HTML
<button class=”show”>表示</button> <button class=”hide”>非表示</button>
<div id=”box”></div>
CSS
#box {
　width: 100px;
　height: 100px;
　background: red;
　margin-top: 30px;
　display: none;
}
JavaScript
$(function() {
　$(‘.show’).click(function() {
　　$(‘#box’).fadeIn(3000);
　});
});
$(function() {
　$(‘.hide’).click(function() {
　　$(‘#box’).fadeOut(3000);
　});
});

fadeTo

「fadeTo」は、指定した透明度に要素を徐々に変更するアニメーションメソッドです。

透明度の値は0〜1の間で指定することができ、0なら非表示、1なら表示になります。

次の例では、表示と非表示の他にもう一つ、「半透明」というボタンを用意しました。要素の透明度を0.5に設定しているので、「半透明」ボタンを押すと要素は少し透けた状態で止まります。

See the Pen fadeTo by KUBO (@KUBOGEN) on CodePen.

HTML
<button class=”show”>表示</button> <button class=”hide”>非表示</button>
<button class=”opacity”>半透明</button>
<div id=”box”></div>
CSS
#box {
　width: 100px;
　height: 100px;
　background: red;
　margin-top: 30px;
　display: none;
}
JavaScript
$(function() {
　$(‘.show’).click(function() {
　　$(‘#box’).fadeTo(“slow”,1);
　});
});
$(function() {
　$(‘.hide’).click(function() {
　　$(‘#box’).fadeTo(“slow”,0);
　});
});
$(function() {
　$(‘.opacity’).click(function() {
　　$(‘#box’).fadeTo(“slow”,0.5);
　});
});

スライド系アニメーションメソッド

スライド系アニメーションメソッドには、「slideDown」、「slideUp」、「slideToggle」などがあります。

slideDown

「slideDown」は、要素をスライドしながら表示させるアニメーションメソッド。

幅は本来の要素のまま、高さが0から本来のサイズへと変化していきます。

slideUp

「slideUp」は、要素をスライドしながら非表示にさせるアニメーション。

幅はそのままで、高さが徐々に0へと変わっていきます。

slideToggle

「slideToggle」は、スライドしながらの表示・非表示を交互に切り替えるアニメーションメソッドで、アコーディオンメニューなどを実装するときに使えます。

See the Pen slideToggle by KUBO (@KUBOGEN) on CodePen.

HTML
<ul>
　<li>
　　<p class=”menu menu1″>menu1</p>
　　<ul class=”list list1″>
　　　<li>list1</li>
　　　<li>list2</li>
　　　<li>list3</li>
　　</ul>
　</li>
　<li>
　　<p class=”menu menu2″>menu2</p>
　　<ul class=”list list2″>
　　　<li>list1</li>
　　　<li>list2</li>
　　　<li>list3</li>
　　</ul>
　</li>
　<li>
　　<p class=”menu menu3″>menu3</p>
　　<ul class=”list list3″>
　　　<li>list1</li>
　　　<li>list2</li>>
　　　<li>list3</li>
　　</ul>
　</li>
</ul>
CSS
ul {
　list-style-type: none;
　padding: 0;
　margin: 0;
　width: 300px;
}
p {
　margin: 0;
　padding: 5px 10px;
　background: #2d3b50;
　color: #fff;
　cursor: pointer;
}
.list {
　padding: 5px 10px;
　background: #f5f5f5;
　box-sizing: border-box;
　display: none;
}
.list li {
　padding: 5px;
}
.menu1, .menu2 {
　border-bottom: 1px solid #fff;
}
JavaScript
$(function() {
　$(“.menu1”).click(function() {
　　$(“.list1”).slideToggle(“slow”);
　});
});
$(function() {
　$(“.menu2”).click(function() {
　　$(“.list2”).slideToggle(“slow”);
　});
});
$(function() {
　$(“.menu3”).click(function() {
　　$(“.list3”).slideToggle(“slow”);
　});
});

animate

「animate」は、独自のアニメーションを実装することができるメソッドです。

たとえば次の例のように、ボタンをクリックすると赤いボックスが右に動くアニメーションの場合、「marginLeft」というプロパティで左の余白に200pxを指定しています。

2秒（2000ミリ秒）かけて左側に余白が200pxできるので、赤いボックスが徐々に右に動くように見えます。

ちなみにリセットボタンを押すと余白を0にして元の位置に戻るようにしています。

See the Pen animate by KUBO (@KUBOGEN) on CodePen.

HTML
<button class=”move”>移動</button>
<button class=”reset”>リセット</button>
<div id=”box”></div>
CSS
#box {
　width: 100px;
　height: 100px;
　background-color: red;
　margin-top: 10px;
}
JavaScript
$(function() {
　$(“.move”).click(function() {
　　$(“#box”)
　　　.animate({
　　　　marginLeft: ‘200px’,
　　　}, 2000);
　});
});
$(function() {
　$(“.reset”).click(function() {
　　$(“#box”)
　　　.animate({
　　　　marginLeft: ‘0’,
　　　}, 0);
　});
});

animateメソッドでは、他にも高さや幅、背景などに関するプロパティを扱うことができ、詳しくは別記事で紹介したいと思います。

アニメーションの終了時に処理を実行

アニメーションメソッドの第2引数として、アニメーションの終了時の処理を指定することができます。

たとえば次の例のように、「画像切り替え」のボタンをクリックすると画像が徐々に非表示になっていき、画像が非表示になると別の画像に切り替えて表示させるといった感じです。

See the Pen callback by KUBO (@KUBOGEN) on CodePen.

HTML
<button id=”button”>画像切り替え</button><br/>
<img id=”image” src=”https://kubogen.com/wp-content/uploads/spain-img/spa​​in​-​i​mg​​-070.jpg”>
CSS
#image {
　width: 223px;
　margin-top: 10px;
}
JavaScript
$(function() {
　$(‘#button’).click(function() {
　$(‘#image’)
　　.hide(5000, function() {
　　　$(this).attr(‘src’, ‘https://kubogen.com/wp-content/uploads/spain-img/spa​​in​-​i​mg​​-074.jpg’);
　　})
　　.show(3000);
　})
});

Leave a Comment