分别为每个 div 的高度设置动画

Question

我需要一种方法来为很多 div 制作动画，而无需单独使用 class 或 id，假设我们有 10 个 div，我想为每个 [=] 制作动画23=]的身高设定百分比。

我可以像这样给每个人做一个随机高度：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
}

    $('div').each(function () {
        var height = getRandomInt(0, 200);
        console.log(height);
        $(this).animate({
            'height': height
        },400);

    });

但是，如果我希望每个 div 的高度与以下对应呢？

$(function () { 
    animateHeight('10%', '35%', '20%', '50%', '70%', '55%', '90%', '35%', '5%', '100%');
});

这是一个jsFiddle

Answer 1

将所有值推送到数组中并使用 each 索引参数设置 div 高度 :

var myArray = Array('60%', '35%', '20%', '50%', '70%', '55%', '90%', '35%', '5%', '100%');

function animateHeight(myArray) 
{
    $('div').each(function (index) {
        var height = myArray[index];
        console.log(height);
        $(this).animate({
            'height': height
        });
    });
}

animateHeight(myArray);

ul li {
    position: relative;
    display: inline-block;
    float: left;
    width: 10px;
    margin: 10px 5px 0 0;
    height: 230px;
}
div {
    height:0;
    position: absolute;
    display: block;
    background: #000;
    width: 5px;
    bottom: 0px;
    top:0;
    margin:auto;
    overflow:visible !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
    <li>
        <div></div>
    </li>
</ul>

更新

var myArray1 = Array('60%', '35%', '20%', '50%', '70%', '55%', '90%', '35%', '5%', '100%');

var myArray2 = Array('10%', '35%', '20%', '50%', '70%', '55%', '90%', '35%', '5%', '100%');

var myArrays = Array(myArray1, myArray2);

var inc = 0;

function animateHeight(myArray) {
    $('div').each(function (index) {
        var height = myArray[index];
        $(this).animate({
            'height': height
        });
    }).promise().done(function () {
        inc++;
        if (myArrays[inc] !== undefined) {
            animateHeight(myArrays[inc]);
        }
    });
}

animateHeight(myArrays[0]);

分别为每个 div 的高度设置动画

Animate each div's height separately

jquery

jquery-animate