JavaScript-анимация очень багги

Question

Итак, у меня очень маленький, незначительный сайт, над которым я работаю. 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».

Answer 1

Вы никогда не очищаете setInterval между анимациями. Просто печатать clearInterval; ничего не делает. Вам необходимо сохранить идентификатор, который возвращается с setInterval(), а затем передать его на звонок clearInterval();.

Поскольку вы не очищаете, эти исходные интервалы все еще работают и все еще пытаются работать с одними и теми же переменными.