基于变量属性的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')});

没有任何反应.我想也许$(this)在这种情况下不起作用,但我目前没有想法.

谢谢.

Answer 1

方式1:

使用$(".chart-bar").each(function(){循环遍历所有div与类.chart-bar并获取属性值.

请查看下面的代码段.

$(".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>