JavaScript動畫非常buggy

所以我有一個非常小的，微不足道的網站我正在努力。 my website如果您點擊底部的灰色條紋，它會爲我製作一種放鬆的動畫，以供將來使用，以編輯放在各種圖片上的信息或我決定放在那裏的任何信息。JavaScript動畫非常buggy

我對動畫代碼是：（編輯，以反映變化）

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」變量返回一個越來越小的值。

來源

2013-07-20 Chucksef

是否有原因，你不能/你不想使用，例如，jQuery？ –

立即：'totalKeys'沒有聲明。把你的代碼放在嚴格模式下，並在其上運行JSHint。 – Ryan

[JSFiddle]（http://jsfiddle.net/）是測試和分享您的JavaScript的好方法。 – eebbesen

你永遠不會清除動畫之間的setInterval。只需輸入clearInterval;不會執行任何操作。您需要存儲從setInterval()返回的ID，然後將其傳遞給clearInterval();。

因爲你沒有清理，那些原始間隔仍在運行，仍然試圖對相同的變量進行操作。

來源

2013-07-20 20:34:58

感謝您的迴應！我查了一下clearInterval（）以獲取更多關於它是如何工作的信息，我想我現在更瞭解它。但是，對我的js進行上述更改並沒有爲動畫的完整性做任何事情。你是否建議這種改變會解決我的問題，還是隻是一個附註？ – Chucksef

我認爲它應該修復它，但我沒有時間深入挖掘，基本上你需要確保'setInterval'的返回結果被分配給一個變量，並且'clearInterval（）'是通過了相同的價值。在你更新的代碼中，我無法判斷'int'是否具有正確的值。 –

JavaScript動畫非常buggy

回答

相關問題