jQuery-Animation wird gestartet, wenn die Elemente auf dem Bildschirm angezeigt werden, nicht beim Laden der Seite - jquery, animation

Ich habe eine Zählung der Zahlen Animation.

Dies ist der Code

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

Die Animation wird jedoch ausgeführt, wenn die Seite geladen und der Inhalt nicht sichtbar ist. Wie kann ich das machen?

Bearbeiten: genauere Frage.

Mein Inhalt ist in der Mitte des Bildschirms mitDamit meine ich, dass ich Ich muss auf der Seite scrollen, um meinen Inhalt zu sehen. Dann ist meine Frage: Wie kann ich meine Skriptanimation verzögern, bis der Inhalt aktiviert ist? der Bildschirm?

Antworten:

Ich denke, Sie suchen nach einer faulen Lade-Animation. Ich bin mir nicht sicher, aber dieses Plugin kann dir helfen.

Auf den ersten Blick würde ich sagen, dass Sie auf Document Ready warten müssen, damit es die Steuerelemente nicht manipuliert, bis alles geladen ist.

Sehen: https://learn.jquery.com/using-jquery-core/document-ready/

Es sollte so etwas sein.

// Shorthand for $( document ).ready()
$(jQuery(".count").each(function () {
jQuery(this).prop("Counter",0).animate({
Counter: jQuery(this).text()
}, {
duration: 5000,
easing: "swing",
step: function (now) {
jQuery(this).text(Math.ceil(now));
}
});
});
);