JavaScript动画非常多虫

时间:2013-07-20 20:21:28

标签: javascript animation

所以我有一个非常小的,无关紧要的网站,我正在努力。 my website如果你点击底部的灰色条形图,它会为我提供一种放松的动画,以便将来用于编辑我在各种图片上放置的信息或我想要的任何内容放在那里。

我的动画代码是:(编辑以反映更改

function animateForm(startPosition,endPosition,firstKey,keyInterval) 
{
    if(currentKey != lastKey)
    {
        animationPointer =( .5 * Math.sin((currentKey * (Math.PI/totalKeys)) - (Math.PI/2))) + .5;
        currentPosition = (animationPointer)*endPosition;
        bottomForm.style.bottom = currentPosition + "px";
        currentKey=currentKey+(keyInterval*1);
    }
    else 
    {
        clearInterval(int);
        int=0;
    }
}

解决了!问题是我将“动画指针”(从0到1的十进制表示动画的进度)乘以“结束位置”,如果动画的目标是结束位置为“0”,则设置我的表格立即处于“隐藏”状态,并且从那里开始出现了事情。

我需要做的是将指针乘以形式可以达到的最大高度,以便在下降时它可以逐渐将越来越小的值返回到“currentPosition”变量。

1 个答案:

答案 0 :(得分:0)

您永远不会清除动画之间的setInterval。只需输入clearInterval;即可。您需要存储从setInterval()返回的ID,然后将其传递给clearInterval();

由于您没有清算,这些原始间隔仍在运行,仍在尝试对相同的变量进行操作。