【jQuery】複数の要素を順番にアニメーションする方法
こんにちはクリアメモリです！
先日は、同じ要素を順番にアニメーションする方法を紹介しました。
ですが、アニメーションのような動作をさせる場合、必ずしも同じ要素で実行させるとは限りませんよね。そこで今回は別の要素でアニメーションを順番に実行する方法を紹介します。
はじめに
前回と同様に今回もjQueryを使います。jQueryを使う準備はあらかじめ済ませておいてください。
今回は、jQueryを使って以下の画像をアニメーションで表示するようにしてみました。
左側の「CLICK!!!」ボタンを押すことでアニメーションが始まり、パーツごとにPCが組み立てられてから最後に「HELLO」という画面が表示されるというものになっています。
コードを用意する
今回使用するコードは以下のようになっています。
このようなコードを作成するとアニメーションを順番に実行できるのですが、アニメーションを順番に実行するためのコードは「js」内にあります。
ですので、今回のようなアニメーションを順番に行いたい場合であれば、「html」と「css」は特に気にしなくて良いです。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
<script src="jquery.js"></script>
<script src="sample02.js"></script>
</head>
<body>
<div id="content">
<div class="title">
<h1>sample page</h1>
</div>
<h2 class="midashi-title">PCアニメーション</h2>
<div class="computer">
<div class="arrow"></div>
<input type="button" class="pc" value="CLICK!!!">
<ul class="pc-body">
<li></li>
<li></li>
<li></li>
<li></li>
<div class="pc-monitor">
<img src="png/hello.png" alt="pc-image" class="pc-img">
</div>
</ul>
<ul class="pc-key">
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
css
/*PC*/
.computer {
width: 640px;
height: 640px;
margin-left: 150px;
position: relative;
}
.pc-monitor {
position: relative;
}
.pc-img {
position: absolute;
width: 499px;
height: 300px;
top: 35px;
left: 35px;
opacity: 0;
z-index: 10;
}
.pc {
width: 168px;
height: 105px;
font-size: 25px;
font-family: cursive;
border: 0;
background-color: transparent;
color: white;
;
position: absolute;
top: 142px;
left: -130px;
outline: none;
}
.pc:hover {
color: red;
}
.arrow:before {
content: "";
border: 10px solid black;
border-top: 48px solid transparent;
border-right: 0 solid transparent;
border-bottom: 50px solid transparent;
border-left: 70px solid black;
position: absolute;
top: 145px;
left: -35px;
}
.arrow:after {
content: "";
border: 20px solid black;
border-left-width: 100px;
position: absolute;
left: -125px;
top: 173px;
}
.pc-body {
position: relative;
z-index: 0;
}
.pc-key {
position: relative;
z-index: 0;
}
.pc-body > li {
list-style-type: none;
position: absolute;
width: 300px;
height: 300px;
background-color: black;
margin: 10px;
}
.pc-key > li {
list-style-type: none;
position: absolute;
width: 300px;
height: 300px;
background-color: black;
margin: 10px;
}
.pc-body > li:nth-child(1) {
width: 78%;
height: 300px;
left: 65px;
top: 25px;
z-index: 2;
background-color: gray;
}
.pc-body > li:nth-child(2) {
width: 81%;
height: 320px;
left: 55px;
top: 15px;
z-index: 1;
background-color: #333;
}
.pc-body > li:nth-child(3) {
width: 89%;
height: 370px;
top: -8px;
left: 30px;
border-radius: 35px;
background-color: #CCCCCC;
}
.pc-body > li:nth-child(4) {
top: -4px;
width: 2%;
height: 15px;
border-radius: 50px;
left: 300px;
}
.pc-key > li:nth-child(1) {
top: 370px;
left: 30px;
width: 570px;
height: 49px;
border-radius: 10px;
border-bottom-right-radius: 35px;
border-bottom-left-radius: 35px;
background-color: #cccccc;
}
.pc-key > li:nth-child(2) {
top: 400px;
left: 35px;
width: 560px;
height: 20px;
border-bottom-left-radius: 500px;
border-bottom-right-radius: 500px;
background-color: #999;
}
.pc-key > li:nth-child(3) {
width: 495px;
height: 10px;
top: 362px;
left: 68px;
border-radius: 500px;
z-index: -1;
}
js
(function($) {
$(document).ready(function() {
$(".pc").click(function() {
$(".pc-body > li").css('left', '2000px');
$(".pc-key > li").css('left', '2000px');
$(".pc-img").css('opacity', '0');
body3()
.then(body2)
.then(body1)
.then(body4)
.then(key3)
.then(key1)
.then(key2)
.then(monitor);
});
function body1() {
var d = new $.Deferred();
$(".pc-body > li:nth-child(1)").animate({
left: "65px"
}, {
duration: 500,
easing: 'linear',
complete: function() {
d.resolve();
}
});
return d.promise();
}
function body2() {
var d = new $.Deferred();
$(".pc-body > li:nth-child(2)").animate({
left: "55px"
}, {
duration: 500,
easing: 'linear',
complete: function() {
d.resolve();
}
});
return d.promise();
}
function body3() {
var d = new $.Deferred();
$(".pc-body > li:nth-child(3)").animate({
left: "30px"
}, {
duration: 500,
easing: 'linear',
complete: function() {
d.resolve();
}
});
return d.promise();
}
function body4() {
var d = new $.Deferred();
$(".pc-body > li:nth-child(4)").animate({
left: "300px"
}, {
duration: 500,
easing: 'linear',
complete: function() {
d.resolve();
}
});
return d.promise();
}
function key1() {
var d = new $.Deferred();
$(".pc-key > li:nth-child(1)").animate({
left: "30px"
}, {
duration: 500,
easing: 'linear',
complete: function() {
d.resolve();
}
});
return d.promise();
}
function key2() {
var d = new $.Deferred();
$(".pc-key > li:nth-child(2)").animate({
left: "35px"
}, {
duration: 500,
easing: 'linear',
complete: function() {
d.resolve();
}
});
return d.promise();
}
function key3() {
var d = new $.Deferred();
$(".pc-key > li:nth-child(3)").animate({
left: "68px"
}, {
duration: 500,
easing: 'linear',
complete: function() {
d.resolve();
}
});
return d.promise();
}
function monitor() {
var d = new $.Deferred();
$(".pc-img").animate({
opacity: '1'
}, {
duration: 1000,
complete: function() {
d.resolve();
}
});
return d.promise();
}
});
})(jQuery);
では、javascript にどのような書き方をすればアニメーションを順番に実行できるのか解説していきます。
コードの解説
今回使用したコードで、順番にアニメーションさせるために使っているコードは「$.Deferred( )」です。
このコードを使うことによって「○つめのアニメーションが完了したら、次のアニメーションを実行する」というようになっています。
Deferredは非同期処理を行う時に使われるコードで、処理を実行中に予期せぬエラーが発生してしまって処理が止まった時に、その後ろに書かれているコードが読み込まれなくなってしまうのを防ぐ事ができます。
他にも、重たい処理を行っているときに、後に書かれた処理を実行させる時はこのような「Deferred」を使う事ができます。
Diferredを定義した中でresolveやpromiseといったコードを使うことで、処理が完了した時の動作を記述しています。
resolveで「d」に処理が完了したことを伝え、promiseで処理を終了させたといった具合になっており、これらのコードを「then」を使った連立関数で順番に実行しています。
このようにすることで、複数の要素をアニメーションで順番に実行することができるようになりました。
まとめ
今回紹介したコードを使うことによって、いろんな要素をアニメーションで実行することができるようになりました。
このようなアニメーションを行う場合、durationやeasingなどに値を入れると、より理想のアニメーションを実行させることができるようになると思います。
ぜひ試してみてください。
