はJQueryアニメーション

Question

我々は彼らの特定の属性値に基づいてアニメーション化したいと思い、同じクラス名を持つ複数のdivがあります。私たちがしようとすると

<div class="chart-bar" style="width:10%;" bar-width="100%"></div> 
<div class="chart-bar" style="width:10%;" bar-width="70%"></div> 
<div class="chart-bar" style="width:10%;" bar-width="30%"></div> 

を：

$(".chart-bar").animate({width: "60%"}); 

その後、これは問題ありません（すべてのdivが60％に拡張されています）。 ただし、試してみると：

$(".chart-bar").animate({width: $(this).attr('bar-width')}); 

何も起こりません。私はおそらく$（これ）はこの文脈では動作しないと思っていますが、私は現在考えがありません。

ありがとうございました。

Answer 1

ウェイ1：クラス.chart-barですべてのdiv要素を通じて$(".chart-bar").each(function(){ループを使用して

と属性値を取得します。

以下のスニペットを確認してください。

$(".chart-bar").each(function(){ 
 
    $(this).animate({width: $(this).attr('bar-width')}); 
 
});

.chart-bar{ 
 
    border:1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="chart-bar" style="width:10%;" bar-width="100%">Div-1</div> 
 
<div class="chart-bar" style="width:10%;" bar-width="70%">Div-2</div> 
 
<div class="chart-bar" style="width:10%;" bar-width="30%">Div-3</div>

ウェイ2：

使用$(".chart-bar").attr("bar-width", function(i, val) {すべてのdivの属性やアニメーションを取得します。

以下のスニペットを確認してください。

$(".chart-bar").attr("bar-width", function(i, val) { 
 
    $(this).animate({width: val}); 
 
});

.chart-bar{ 
 
    border:1px solid #ccc; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="chart-bar" style="width:10%;" bar-width="100%">Div-1</div> 
 
<div class="chart-bar" style="width:10%;" bar-width="70%">Div-2</div> 
 
<div class="chart-bar" style="width:10%;" bar-width="30%">Div-3</div>