「要素が見えたタイミング」でグラフが伸びるアニメーションを実装したい

Question

【目標】
「要素が見えたタイミングで、左から右へとグラフが伸びるアニメーション」を作ろうとしています。

【解決したいこと】
左から右へグラフが伸びるアニメーション自体は成立していますが
「要素が見えたタイミングで」という条件がクリアできていません。この条件を解決したいです。

【現状】
要素が見えたタイミングを解決するために「jquery.inview.js」を取り入れてみましたが
上手く動作させられていません。

【現在のコード】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.inview.js" type="text/javascript"></script>
<script type="text/javascript">
　//.graphが画面内に入ったら.animeを付与
　$('.graph').on('inview', function() {
   　$(this).addClass("anime");
　});
</script>

「jquery.inview.js」を使用して画面内に入った時に「.graph」へ「.anime」を付与する方法を考えています。

  <!--スクロールのための余白部分-->
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div class="graph">
    <span class="block bar-01">
    </span>
    <span class="block bar-02">
    </span>
  </div>

body {background-color: #272b34;}

@keyframes expand {
	from {width: 0%;}
	to {width: 100%;}
}
.graph.anime{
	width: 0%;
	animation: expand 1.5s ease forwards;
}
.block {
	display: block;
	height: 100px;
	float: left;
}
.bar-01{width: 40%; background: #334D5C;}
.bar-02{width: 20%; background: #45B29D;}

「animation:expand」を指定して、@keyframesで横幅を伸ばし
グラフをアニメーションさせようと考えていますが、jsで「.anime」を付与すると動作しなくなってしまいます。

「要素が見えたタイミング」という前提でなければ、棒が伸びるというアニメーション自体は動作します。
（jsを使用せず、上記CSSの「.graph.anime」が「.graph」となった状態では動作する）

「要素が見えたらアニメーション開始」を実現する方法を
ご教授いただければと思います。どうぞよろしくお願い致します！

以下コンソールのスクショです（上crome　下firefox）

Comments

[kei344]

エラーは出ていませんか？デベロッパーツールで確認してみてください。https://eng-entrance.com/javascript-display-error

[maki_oden]

crome,firefoxで確認しましたがエラーは出ていませんでした。

Answer 1

これでも同じでしょうか？

$( function() {
　$('.graph').on('inview', function() {
   　$(this).addClass("anime");
　});
});

Comments

[maki_oden]

！！！！！
ありがとうございます！！
いただいたjsに書き換えたところ、見事に動作しました！