web-dev-qa-db-ja.com

ゼロから値までのjQueryアニメーション数カウンター

ゼロからその値までの数値をアニメーション化するスクリプトを作成しました。

ワーキング

jQuery

$({ Counter: 0 }).animate({
  Counter: $('.Single').text()
}, {
  duration: 1000,
  easing: 'swing',
  step: function() {
    $('.Single').text(Math.ceil(this.Counter));
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>

動かない

ここで、一致する各クラスのページでスクリプトを数回実行したいと思います。

以下は私が試しているものですが、これまでのところ成功していません：

[〜＃〜] html [〜＃〜]

<span class="Count">200</span>
<span class="Count">55</span>

[〜＃〜] jquery [〜＃〜]

$('.Count').each(function () {
  jQuery({ Counter: 0 }).animate({ Counter: $(this).text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $(this).text(Math.ceil(this.Counter));
    }
  });
});
javascriptjqueryhtmlanimationeach
34
DreamTeK

thisは、ステップコールバック内の要素を参照しません。代わりに、関数の先頭でその要素への参照を保持する必要があります（この例では_$this_でラップされています）。

_$('.Count').each(function () {
  var $this = $(this);
  jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter));
    }
  });
});
_

更新：10進数を表示したい場合、値を_Math.ceil_で丸める代わりに、value.toFixed(2)でインスタンスを小数点以下2桁に丸めることができます。

_step: function () {
  $this.text(this.Counter.toFixed(2));
}
_
70
floribon

ステップコールバック内のthisは要素ではなく、animate（）に渡されるオブジェクトです

$('.Count').each(function (_, self) {
    jQuery({
        Counter: 0
    }).animate({
        Counter: $(self).text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function () {
            $(self).text(Math.ceil(this.Counter));
        }
    });
});

これを行い、thisへの参照を保持する別の方法は

$('.Count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

[〜＃〜] fiddle [〜＃〜]

17
adeneo

[〜＃〜] important [〜＃〜]：小さな違いのように思えますが、実際にはデータ属性を使用して、カウントアップする元の数値を保持する必要があります。元の番号を変更すると、意図しない結果になる可能性があります。たとえば、要素が画面に入るたびにこのアニメーションを実行しています。しかし、最初のアニメーションが終了する前に、要素が画面に入り、画面から出て、もう一度画面に入ると、間違った数までカウントされます。

HTML：

<p class="count" data-value="200" >200</p>
<p class="count" data-value="70" >70</p>
<p class="count" data-value="32" >32</p>

JQuery：

$('.count').each(function () {
    $(this).prop('Counter', 0).animate({
            Counter: $(this).data('value')
        }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {                      
            $(this).text(this.Counter.toFixed(2));
        }
    });
});
5
Tyler Kemme

コードが行うことは、数字8000が0から8000までカウントアップすることです。問題は、それが非常に長いページの中央に配置され、ユーザーがスクロールダウンして実際に数字を見ると、アニメーションがすでに食事をしていることです。ビューポートにカウンターが表示されたら、カウンターをトリガーします。

JS：

$('.count').each(function () {
                $(this).prop('Counter',0).animate({
                        Counter: $(this).text()
                }, {
                        duration: 4000,
                        easing: 'swing',
                        step: function (now) {
                                $(this).text(Math.ceil(now));
                        }
                });
            });

そしてHTML：

 <span class="count">8000</span>
2
igor

.each()で要素自体を取得できます。thisを使用する代わりにこれを試してください

$('.Count').each(function (index, value) {
    jQuery({ Counter: 0 }).animate({ Counter: value.text() }, {
        duration: 1000,
        easing: 'swing',
        step: function () {
            value.text(Math.ceil(this.Counter));
        }
    });
});
1
Starscream1984

これは私の仕事です！

<script type="text/javascript">
$(document).ready(function(){
        countnumber(0,40,"stat1",50);
        function countnumber(start,end,idtarget,duration){
            cc=setInterval(function(){
                if(start==end)
                {
                    $("#"+idtarget).html(start);
                    clearInterval(cc);
                }
                else
                {
                   $("#"+idtarget).html(start);
                   start++;
                }
            },duration);
        }
    });
</script>
<span id="span1"></span>
0
Taufiq Shamad

これは私のために働いた

HTMLコード

<span class="number-count">841</span>

jQueryコード

$('.number-count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
0
Murtaxa

これは私のために働いています

$('.Count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
0
Ahmed Al Bermawy