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

复制并更改功能

1 个答案: