【縦棒グラフの実装】アニメーション

前提・実現したいこと

【縦棒グラフの実装】
ページ上に表示された時に、4本のうち1本だけ下から上に動くアニメーションを実装したいです。
添付の画像の濃い青色のグラフ1本だけが動くイメージです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css">
9    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
10</head>
11<body>    
12    <div class="hako">
13        <div id="nobi-box"> </div>
14        </div>
15    <script src="style.js"></script>
16    <script src="jquery.inview.min.js"></script>
17</body>
18</html>
19

CSS
1#nobi-box {
2    background-color: #F39;
3    height: 100px;
4    width: 100px;
5    position: relative;
6    bottom: -300px;
7}
8
9.hako{
10    height: 400px;
11}

js
1$(function(){
2    $("#nobi-box").click(function(){
3        $("#nobi-box").animate( {height:"-300px"} , 5000);
4    });
5});

試したこと

いろんなサイトをみつつ、やったのですが、横方向のものしか見つけられませんでした。
canvasは使わずに作りたいです。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yambejp

2021/10/20 00:08

＞ 4本のうち1本だけ下から上に例には5本ありますが、どれかを下から伸ばせばいいのですか？

omido

2021/10/20 04:22

失礼しました。 5本の間違いです、どれか1本を伸ばしたいです。

yambejp

2021/10/20 04:29 編集

回答してあります、テストしてみてください

行動規範の内容に同意します

回答1件

ベストアンサー

css
1<style>
2.hako{
3  height: 400px;
4  background-color: gray;
5  display: flex;
6  justify-content:space-around;
7}
8.nobi-box {
9  margin-top: auto;
10  background-color: yellow;
11  width: 100px;
12  bottom: 0;
13}
14.nobi-box:nth-child(5) {
15  background-color: red;
16  animation: moveup 1s ease;
17  animation-fill-mode:forwards;
18}
19@keyframes moveup{
20  0%,60%  { height:0px;}
21  100%{ height:default;}
22}
23</style>
24<div class="hako">
25<div class="nobi-box" style="height:100px"> </div>
26<div class="nobi-box" style="height:150px"> </div>
27<div class="nobi-box" style="height:200px"> </div>
28<div class="nobi-box" style="height:250px"> </div>
29<div class="nobi-box" style="height:300px"> </div>
30</div>
31