インラインCSSにjQuery関数を適用する方法

Question

私は見つけたビットとボブを使用してアニメーションの統計サークルカウンタを組み立てています。円は中心に数字の統計を持っています、そして、私はこれが成功すると0からカウントアップしています。

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

そして、ここでは、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)); 
     } 
    }); 
}); 

私は今の順序で、インラインスタイルセレクター 『strokedashオフセット』を標的とすることにより、「.front・サークル」に同じ関数を適用したいのですが数字のカウンターの横に円を描くようにしていますが、これを達成するのには苦労しています。 https://jsfiddle.net/ch8phcbd/

ちょうど私がのように、目標とこれを達成するために、インラインスタイルセレクターの値を操作するとjQueryで変更可能な値を配置しないようにしたいのですが、明確にする：ここSCSSと

全JSフィドル最終バージョンでは、この値はビューページに動的に引き込まれます。

何か助けていただければ幸いです。

ありがとうございます！

Answer 1

私がしたことは、CSSのトランジションを削除してアニメーションに影響を与えず、各ステップで赤い円のストロークダッシュオフセットを減らすことでした。

$('.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：

、我々は最初のストローク、オフセットがためにする必要がありますどのように多くのピクセルを見つける必要があるカウンタをより詳細に制御を持っているために、 100％赤で囲む あなたの場合の数字は472です。つまり、円の1％は4.72ピクセルです。 次に、ストロークオフセットを数字ごとに1回だけ増やす必要があります。関数は50回以上呼び出されているので、数値を丸めるだけで、最後のステップから中間の数値が変更されているかどうかを確認するifステートメントを追加しました。オフセットに1％を追加してください：

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

<h6 class="counter stat">50</h6>の番号を変更すると、どのパーセントでも機能することがわかります。

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

Answer 2

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

計算がオフセットし、それを適用します：あなたは少しそれを書き換えた場合のローディングアニメーションは時計回り

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

あるので

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

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

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

もCSSを編集しました、あなたはfliする必要はありませんそれを水平に（scaleX（-1））、あなたは考えを得る。