Question

当div已经在html的css中定义了宽度时，如何使用animate为多个div宽度设置动画。

例如。如果我在html中有style="width:30%;"，并且我想将该div设置为0到30％的动画，我该怎么办呢？并在具有相同类的多个div中执行此操作？

要为没有定义宽度的div设置动画到某个值，我知道我可以这样做$('div').animate({ width: 'value' }, milisecs);但是我不想在JS上设置宽度值并重复此操作多次划线。

我创建了这个Fiddle，可能有助于更好地理解。提前谢谢。

Answer 1

尝试使用data()之类的，

<强> HTML

<p>Single</p>
<div class="container">
    <div class="fill" data-width="80%">
        <span><b>Bar One</b></span>    
    </div>
</div>
<hr>
<p>Multiple</p>
<div class="container">
    <div class="fillmult" data-width="90%">
        <span><b>Bar 1</b></span>    
    </div>
</div>
<div class="container">
    <div class="fillmult" data-width="50%">
        <span><b>Bar 2</b></span>    
    </div>
</div>
<div class="container">
    <div class="fillmult" data-width="70%">
        <span><b>Bar 3</b></span>    
    </div>
</div>
<div class="container">
    <div class="fillmult" data-width="20%">
        <span><b>Bar 4</b></span>    
    </div>
</div>

<强> SCRIPT

$('.container > div').each(function(){ // you can use $('.fill, .fillmult').each
    var width=$(this).data('width');
    $(this).animate({ width: width }, 1500);
});

<强> Live Demo

jQuery Progress动画到预定义的宽度 - 多个Div

1 个答案: