複製和更改功能

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