Question

我需要一种方法来动画很多没有分类或ID的div，让我们说我们有10个div，我想用设定的百分比来设置每个div的高度。

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

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 index参数设置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的高度设置动画

1 个答案: