クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

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

f:id:clrmemory:20171121065753p:plain

こんにちはクリアメモリです!

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

ですが、アニメーションのような動作をさせる場合、必ずしも同じ要素で実行させるとは限りませんよね。そこで今回は別の要素でアニメーションを順番に実行する方法を紹介します。

 

 

はじめに

 

前回と同様に今回もjQueryを使います。jQueryを使う準備はあらかじめ済ませておいてください。 

www.clrmemory.com

 

今回は、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などに値を入れると、より理想のアニメーションを実行させることができるようになると思います。

 

www.clrmemory.com

 

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

新着記事