jQuery animierte Anzahl Zähler von null auf den Wert

Habe ich ein Skript erstellt zu animieren, eine Anzahl von null an ist es Wert.

Arbeiten

jQuery

JS:

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

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="Single">150</span>

Nicht Arbeiten

Will ich jetzt ausführen, um das Skript mehrfach auf der Seite für jeden passende Klasse.

Unten ist das, was ich bin versucht, aber bisher ohne Erfolg:

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));
    }
  });
});

Überprüfen Sie dieses einfache Beispiel für Jquery Animierte Anzahl Zähler Von Null Auf Wert - Javascript-Animation

InformationsquelleAutor DreamTeK | 2014-04-11

69

Ihre thisbezieht sich nicht auf das element in der Schritt-Rückruf, anstatt Sie möchten, halten eine Referenz auf den Anfang der Funktion (eingewickelt in $thisin meinem Beispiel):
```
$('.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));
    }
  });
});
```
Update: Wenn Sie möchten, Dezimalzahlen, dann statt der Rundung den Wert mit Math.ceil Sie können rund bis zu 2 Dezimalstellen zum Beispiel mit value.toFixed(2):
```
step: function () {
  $this.text(this.Counter.toFixed(2));
}
```
- was ist, wenn wir haben dezimale zahlen?
- Ich weiß, dies ist ein Alter thread, aber für zukünftige Googler, hier ist, wie ich gezwickt die Antwort auf Griff stellen, sowie Präfix-und postfix - (zum Beispiel, "$12.34 Millionen" (ich bin sicher, es könnte sauberer sein): gist.github.com/ashicus/b18f2831d7d21fc10fe2e47c41922328
- Ich habe auch aktualisiert, meine Antwort mit einer Möglichkeit zum drucken von zahlen mit beliebiger Anzahl von Nachkommastellen
- Vielen Dank für die gute snippet @floribon. Was ich tun konnte, für die nicht das schreiben von code zweimal, wenn ich tun möchte, count down nach Zählung mit dem gleichen code? Irgendeine Idee?
- Ich kann nicht das fiddle fiddle, dass @Obsidian veröffentlicht, um die Arbeit mit Dezimalzahlen, 100.50 zeigt sich als 101, versucht, mit @ashicus und @floribon code funktioniert aber nicht, irgendwelche Ideen? Vielen Dank im Voraus!
- Überprüfen Sie dieses einfache Beispiel für Jquery Animierte Anzahl Zähler Von Null Auf Wert - Javascript-Animation
- wie zu schwingen kontinuierlich.
InformationsquelleAutor floribon

this in den Schritt, Rückruf ist nicht das element, sondern das übergebene Objekt animieren()

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

Einen anderen Weg, dies zu tun und halten Sie die Verweise auf this wäre

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

GEIGE

InformationsquelleAutor adeneo

WICHTIG: Es scheint wie ein kleiner Unterschied, aber Sie sollten wirklich ein data-Attribut, um zu halten die ursprüngliche Zahl zu zählen, bis zu. Änderung der ursprünglichen Zahl kann un-beabsichtigten Folgen. Zum Beispiel, ich habe diese animation ausführen jedes mal wenn ein element betritt den Bildschirm. Aber wenn das element enters, exits, und dann in den Bildschirm ein zweites mal, bevor die erste animation abgeschlossen ist, wird es zählen, bis die falsche Nummer.

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));
        }
    });
});

InformationsquelleAutor Tyler Kemme

Was der code macht, ist, dass die Zahl 8000 ist das zählen von 0 auf 8000. Das problem ist, dass es in der Mitte der Recht langen Seite, und wenn der Benutzer einen Bildlauf nach unten und sehen tatsächlich die Zahl, die animation ist schon Speisen. Ich würde gerne die trigger der Zähler, sobald es erscheint im Ansichtsfenster.

JS:

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

Und HTML:

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

InformationsquelleAutor igor

Können Sie das element selbst in .each(), versuchen Sie dies statt mit 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));
        }
    });
});

Ich konnte nicht diese zu arbeiten, aber vielen Dank für deinen input.

InformationsquelleAutor Starscream1984

Hier ist meine Lösung
und es ist auch Arbeit, wenn das element zeigt sich in den viewport

Sehen Sie den code in Aktion, indem Sie jfiddle

var counterTeaserL = $('.go-counterTeaser');
var winHeight = $(window).height();
if (counterTeaserL.length) {
    var firEvent = false,
        objectPosTop = $('.go-counterTeaser').offset().top;

        //when element shows at bottom
        var elementViewInBottom = objectPosTop - winHeight;
    $(window).on('scroll', function() {
        var currentPosition = $(document).scrollTop();
        //when element position starting in viewport
      if (currentPosition > elementViewInBottom && firEvent === false) {
        firEvent = true;
        animationCounter();
      }   
    });
}

//counter function will animate by using external js also add seprator "."
 function animationCounter(){
        $('.numberBlock h2').each(function () {
            var comma_separator_number_step =           $.animateNumber.numberStepFactories.separator('.');
            var counterValv = $(this).text();
            $(this).animateNumber(
                {
                  number: counterValv,
                  numberStep: comma_separator_number_step
                }
            );
        });
    }


https://jsfiddle.net/uosahmed/frLoxm34/9/

InformationsquelleAutor ahmed

Dies ist für mich arbeiten

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

InformationsquelleAutor Ahmed Al Bermawy

Dies ist Arbeit für mich !

<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>

InformationsquelleAutor Taufiq Shamad

Dieser arbeitete für mich

HTML-CODE

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

jQuery-Code

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

InformationsquelleAutor Murtaxa

-1

Können Sie tun es mit der animate-Funktion in jQuery.

$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
    duration: 8000,
    easing: 'linear',
    step: function () {
        $('.yourelement').html(Math.floor(this.countNum));
    },
    complete: function () {
        $('.code').html(this.countNum);
        //alert('finished');
   }
});