nnnoot
@nnnoot

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

jqカウントアップアニメーションについて

解決したいこと

jqカウントアップアニメーションについて。カウントアップが該当する要素に入った際にループされるが一度のみの表示にしたい。

該当するソースコード


$('#box1').on('inview', function(event, isInView) {
  if (isInView) {
    //要素が見えたときに実行する処理
    $("#box1 .count-up").each(function(){
      $(this).prop('Counter',0).animate({//0からカウントアップ
            Counter: $(this).text()
        }, {
        // スピードやアニメーションの設定
            duration: 2000,//数字が大きいほど変化のスピードが遅くなる。2000=2秒
            easing: 'swing',//動きの種類。他にもlinearなど設定可能
            step: function (now) {
                $(this).text(Math.ceil(now));
                          }
        });
    });
  }
});

自分で試したこと

one を使えばいいという箇所までたどり着いたがその後がわからない。

0

3Answer

参考にしたサイト等あれば教えていただけますか?HTMLのコードも載せていただけると助かります。
おっしゃる通りoneを使えば問題ないように見えます(突っ込みどころは他にもありますが)。

0Like

_y_s様何度もありがとうございます。

index.html
<div id="box1" class="box">
              <p><br><span class=" title text count-up count-size">100</span><span class="count-text">%</span></p>
              <div class="sub-title"> テキスト</div>
              <p class="desc"></p>
              <!--/box-->
            </div>

参考サイトは以下

0Like

Comments

  1. @nnnoot

    Questioner

    遅くなりました。
    確認したところ正常に作動しました。
    README確認不足でした。
    ご教示いただきありがとうございました。

Your answer might help someone💌