дублировать и изменить функцию

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

Похоже, вам просто нужно создать 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);
 }