【jQuery】複数の要素を順番にアニメーションする方法

先日は、同じ要素を順番にアニメーションする方法を紹介しました。

 

ですが、アニメーションのような動作をさせる場合、必ずしも同じ要素で実行させるとは限りませんよね。

そこで今回は別の要素でアニメーションを順番に実行する方法を紹介します。

はじめに

 

前回と同様に今回もjQueryを使います。

jQueryを使う準備はあらかじめ済ませておいてください。

 

【jQuery】アニメーションを順番に実行させる方法! - クリアメモリ

 

今回は、jQueryを使って以下の画像をアニメーションで表示するようにしてみました。

 

スクリーンショット 2016-06-16 12.01.32

 

左側の「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を定義した中でresolvepromiseといったコードを使うことで、処理が完了した時の動作を記述しています。

 

resolveで「d」に処理が完了したことを伝え、promiseで処理を終了させたといった具合になっており、これらのコードを「then」を使った連立関数で順番に実行しています。

このようにすることで、複数の要素をアニメーションで順番に実行することができるようになりました。

 

まとめ

 

今回紹介したコードを使うことによって、いろんな要素をアニメーションで実行することができるようになりました。

このようなアニメーションを行う場合、durationeasingなどに値を入れると、より理想のアニメーションを実行させることができるようになると思います。

 

【jQuery】アニメーション完了までの時間を指定する方法 - クリアメモリ

 

ぜひ試してみてください。

ではまた。

過去にレビューしたアイテム