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(){遍历所有带有类.chart-bar的div并获取属性值。

请查看下面的代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

方式2：

使用$( ".chart-bar" ).attr( "bar-width", function( i, val ) {获取所有div和动画的属性。

请查看下面的代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

基于变量属性的JQuery动画

1 个答案: