javascript 复制和更改函数

rqqzpn5f  于 2023-01-16  发布在  Java
关注(0)|答案(1)|浏览(111)

我这里有这个代码:

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(每个称为slideDiv1slideDiv2,...),我想要的是div 10开始,然后当它达到大约100px的高度时,我想要9和11开始,依此类推。
我试过setInterval,每次都增加x,但是不起作用,因为它停止了前一个div的动画,并在完成之前移动到下一个。我想这是因为我改变了那个函数,对吗?
我想知道的是,是否必须为每组div复制该函数,或者可以自动执行该操作?
我必须能够用原生JavaScript而不是jQuery来完成这一切,因为这是一个大学项目。

nimxete2

nimxete21#

听起来你只需要创建一个带参数的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);
 }

相关问题