【　jQuery　】animateメソッドで要素を上下に動かす

# はじめに
ポートフォリオサイトを少しでも見栄えのあるものにするためにjQueryの`animateメソッド`を使ってみました。
挙動としてはサイトを開いてからループで要素を動かすというものです。

実装イメージ↓
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772095/b4ebbd0f-bb88-cc53-b89f-e8ebb476a644.gif)

# 目次
[1.htmlの記述](#1-htmlの記述)
[2.cssの記述](#2-cssの記述)
[3.jQueryの記述](#3-jQueryの記述)

## 1. htmlの記述

```php:index.html
<div class="arrow-1", id="arrow_1"></div>
<div class="arrow-2", id="arrow_2"></div>
<div class="arrow-3", id="arrow_3"></div>
<div class="arrow-4", id="arrow_4"></div>
<div class="arrow-5", id="arrow_5"></div>
```
空のdivタグにclassとidを付与します。
「jsで操作するしますよ」という意図を込めてidは付与しています。
cssだけでも大丈夫です。

## 2. cssの記述

```php:style.css
.arrow-1 {
  position: absolute;
  right:50vw;
  bottom: 120px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg);  
 }
 .arrow-2 {
  position: absolute;
  right:50vw;
  bottom: 100px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }
 .arrow-3 {
  position: absolute;
  right: 50vw;
  bottom: 80px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }
 .arrow-4 {
  position: absolute;
  right: 50vw;
  bottom: 60px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }
 .arrow-5 {
  position: absolute;
  right: 50vw;
  bottom: 40px;
  width: 30px;
  height: 30px;
  border: 5px solid;
  border-color:  transparent transparent #FFF #FFF;
  transform: rotate(-45deg); 
 }
```
`position:absolute;`で5つの矢印の位置を調整しています。ここはお好みです。

`border-color`プロパティは上下左右のborderの色を指定出来ます。
`border-color: 上　右　下　左`が指定する順番です。
`transparent`は透明色です。つまり、この場合は上と右が白色で下と左が透明になります。

`transform: rotate(-45deg)`で角度を45度回転させます。
こうることで擬似的に下矢印を作れます。

## 3. jQueryの記述

```php:index.js
$(function() {
  // 矢印を動かす
  setInterval(function() {

    $("#arrow_1").animate({
      bottom: "-=55px"}, 1000);
    $("#arrow_1").animate({
      bottom: "+=55px"}, 1000);

    $("#arrow_2").animate({
      bottom: "-=45px"}, 1000);
    $("#arrow_2").animate({
      bottom: "+=45px"}, 1000);

    $("#arrow_3").animate({
      bottom: "-=35px"}, 1000);
    $("#arrow_3").animate({
      bottom: "+=35px"}, 1000);

    $("#arrow_4").animate({
      bottom: "-=25px"}, 1000);
    $("#arrow_4").animate({
      bottom: "+=25px"}, 1000);

    $("#arrow_5").animate({
      bottom: "-=15px"}, 1000);
    $("#arrow_5").animate({
      bottom: "+=15px"}, 1000);
  
  },1000);
});
```
今回のように同じ処理を一定時間または、ループさせたいときは`setInterval関数`を用います。
詳しい説明は[この記事が参考になります](https://since-inc.jp/blog/4824)

setInterval関数の中身について最初の矢印の`#arrow_1`を例に見ていきます。
まず`$("#arrow_1")`で要素をとってきます。

最初は矢印を現在の位置から下に55pxぶん１秒かけて移動させます。
`$("#arrow_1").animate({bottom: "-=55px"}, 1000);`
animateメソッドは`.animate(cssプロパティ, duration, easing, 関数)`を引数にとります
今回はcssプロパティとdurationを使いました。
ちなみにdurationはミリ秒で指定するようになっており、アニメーションが完了するまでの時間を設定できます。

次は矢印をもとの位置に1秒かけて戻します（55pxぶん上に移動させる）
`$("#arrow_1").animate({bottom: "+=55px"}, 1000);`

あとは同じ処理を5つ分記述していきます。
pxは少しずつ値が異なるので注意してください。

# おわりに
実装は以上です！最後まで読んでいただきありがとうございました！
お疲れさまでした。。。