复制和更改功能

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增加其高度。

我有这些div S的20（每个称为slideDiv1，slideDiv2，...）和我想要的是DIV 10开始，那么当它达到的高度约100px，我想9和11开始等等等等。

我试过setInterval，每次增加x，但这样做不起作用，因为它停止了前一个div的动画并在完成之前移动到下一个。我认为那是因为我正在改变这个功能？

我想知道的是，我必须复制每套div s的功能还是可以自动化？

我必须能够在原生JavaScript中执行所有操作，而不是使用jQuery，因为它适用于大学项目。

Answer 1

这听起来像你只需要一个参数创建了slideDown，然后把你的元素集合在一个数组，像这样：

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); 
}