【jQuery】変数を使ってホバー時にサイドバーを動かす方法

変数とは

変数は様々な情報を入れるための箱のような存在です。
名前のついた箱を用意し、その中に値が変化するモノを入れておくことでいつでも取り出せる便利な箱になります。
変数を用いれば変更・修正する際にその１箇所だけを変更すればいいので楽です。

要素の横のバーを動かす

ホバーした際に黒のバーをホバーした要素の横に移動させます。
ホバーしていない時は一番上にバーがある上程です。

HTML

<div class="sidebar">
        <ul class="sidebar_links">
          <li><a href="#"><span>サイドメニュー01</span></a></li>
          <li><a href="#"><span>サイドメニュー02</span></a></li>
          <li><a href="#"><span>サイドメニュー03</span></a></li>
          <li><a href="#"><span>サイドメニュー04</span></a></li>
        </ul>
        <div class="sidebar_links_bar"></div>
      </div>

CSS

.sidebar {
  position: relative;
  width: 200px;
}

.sidebar_links_bar {
  background-color: #000;
  height: 80px;
  right: 0;
  position: absolute;
  top: 0;
  width: 10px;
}

.sidebar_links > li {
  border-top: 1px solid #000;
}

.sidebar_links > li > a {
  align-items: center;
  background-color: #fff;
  display: flex;
  height: 79px;
  padding: 0 30px;
}

jQuery

$('.sidebar_links > li').hover(function() {
  var slideIndex = $('.sidebar_links > li ').index(this);
  $('.sidebar_links_bar').stop().animate({'top': slideIndex * 80}, 300);
},function() {
  $('.sidebar_links__bar').stop().animate({'top': 0});
});