javascript - 复制和更改函数

Question

我这里有这段代码:

function slideDown(){
    //get the element to slide
    var sliding = document.getElementById('slideDiv'+x);

    //add 1px to the height each time
    sliding.style.height = parseInt(sliding.style.height)+5+'px';
    t=setTimeout(slideDown,15);
    if (sliding.style.height == "401px"){clearTimeout(t);}
}

获取元素slideDivx并增加其高度直到达到401px。

我有 20 个这样的 div(每个称为 slideDiv1、slideDiv2...)，我想要的是 div 10开始，然后当它的高度达到大约 100px 时，我想要 9 和 11 开始，依此类推。

我尝试过 setInterval 并每次增加 x，但这不起作用，因为它会停止之前的 div 动画并移动在完成之前继续下一个。我想那是因为我正在改变这个功能，对吧？

我想知道的是，我是否必须为每组 div 复制该函数，或者我可以自动化吗？

我必须能够使用原生 JavaScript 而不是 jQuery 来完成这一切，因为这是一个大学项目。

Answer 1

听起来您只需要使用参数创建幻灯片，然后将元素集发送到数组中，如下所示:

 var elementIntervals = [];
 function animateElements(elementArray)
 {
     for(var j = 0; j < elementArray; j++)
     {
         (function(element, index)
         {
             elementIntervals[index] = setTimeout(function()
             {
                 slideDown(element, index);
             }, 15 + (100 * index));
         })(elementArray[j], j);
     }
 }

 function slideDown(sliding, index)
 {
     sliding.style.height = parseInt(sliding.style.height)+5+'px';

     if(sliding.style.height == "401px")
        clearTimeout(elementIntervals[index]);
     else
        elementIntervals[index] = setTimeout(function()
        {
            slideDown(sliding, index);
        }, 15);
 }