So wenden Sie eine jQuery-Funktion auf Inline-CSS an

Question

Ich habe einen animierten Stat-Circle-Counter mit Hilfe von Bits und Bobs zusammengestellt, die ich gefunden habe. Der Kreis hat den numerischen Wert in der Mitte, und ich habe das Ergebnis erfolgreich von Null aufwärts gezählt, wenn es läuft.

<div class="single-circle"> 
    <h6 class="counter stat">50</h6> 
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 165 165" class="circle-svg"> 
    <g id="circles" data-name="circles"> 
     <circle class="back-circle" cx="82.5" cy="82.5" r="75" /> 
     <circle class="front-circle" cx="82.5" cy="82.5" r="75" style="stroke-dashoffset: -235px;" /> 
    </g> 
    </svg> 
</div> 

Und hier ist die jQuery:

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

Ich möchte nun die gleiche Funktion anwenden zu ".front-Kreis" durch den Inline-Stil Selektor "strokedash-Offset" Targeting, um den Kreis neben dem numerischen Zähler animieren zu lassen, aber ich kämpfe darum, dies zu erreichen.

Voll JS Fiddle mit SCSS hier: https://jsfiddle.net/ch8phcbd/

Nur um zu klären, ich möchte den Inline-Stil Selektor Wert um dies zielen und zu manipulieren, zu erreichen und vermeiden veränderbare Werte in der jQuery platzieren, wie es in der finale Version Dieser Wert wird dynamisch in die Ansichtsseite übernommen.

Jede Hilfe wird geschätzt.

Danke!

Answer 1

Was ich getan habe, war die CSS-Übergänge zu entfernen, so dass sie die Animation nicht beeinflussen und bei jedem Schritt dekrementiert die Strich-Strich-Offset von Ihrem roten Kreis.

$('.counter').each(function() { 
    var $this = $(this); 
    jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, { 
     duration: 2000, 
     easing: 'swing', 
     step: function() { 
      $this.text(Math.ceil(this.Counter)); 
    var increase = Math.ceil(this.Counter); 
    $(".front-circle").css("stroke-dashoffset", "-=2.5"); 
     } 
    }); 
}); 

JsFiddle: https://jsfiddle.net/ch8phcbd/4/

UPDATE:

Um mehr Kontrolle über die Theke haben müssen wir zuerst finden, wie viele Pixel der Hub-Offset für die um sein muss Kreis zu 100% rot. Die Zahl in Ihrem Fall ist 472, was bedeutet, dass 1% des Kreises 4.72px ist. Dann müssen wir den Hub-Offset nur einmal pro Nummer erhöhen. Da die Funktion mehr als 50 Mal aufgerufen wird und nur die Zahlen abrundet, habe ich eine if-Anweisung hinzugefügt, um zu überprüfen, ob sich die Nummer in der Mitte seit dem letzten Schritt geändert hat, und 1% zum Offset hinzuzufügen:

if(Math.ceil(this.Counter) > $this.text()) 
     { 
     $(".front-circle").css("stroke-dashoffset", "-=" + singlePercent); 
     } 

Wenn Sie die Zahl in <h6 class="counter stat">50</h6> ändern, können Sie sehen, dass es für jeden Prozentwert funktioniert.

JsFiddle: https://jsfiddle.net/ch8phcbd/10/

Answer 2

https://jsfiddle.net/vvkqmqLm/4/

berechnen versetzt und dann gilt es:

var r = $circle.attr('r'); 
var c = Math.PI*(r*2); 

(val < 0) { val = 0;} 
(val > 100) { val = 100;} 

pct = ((100-val)/100)*c; 

auch bearbeitet CSS so laden Animation im Uhrzeigersinn

.circle-svg { 
    transform: rotate(90deg) scaleX(-1); 
} 

ist Wenn Sie es etwas umschreiben Du wirst nicht fli brauchen p es horizontal (scaleX (-1)), aber Sie bekommen die Idee.