JS/jQuery - 僅在懸停時播放GIF

Question

最近我們爲我們的網站製作了一些GIF動畫。其中一個動畫是地圖上的標記，在空中「跳躍」。我們的想法是讓鼠標在鼠標上跳躍一次。換句話說：它只能播放一次，而不是在盤旋時進入無限循環。

我開始閱讀這篇文章：Animating a gif on hover。我使用代碼在懸停時啓動動畫，並用鼠標將其替換爲靜態圖像。

但是這並沒有使我接近我想要的東西。有了這個腳本，它一直在循環播放，這是邏輯，但正是我們不想要的。另外，當您將鼠標移出時，我們希望GIF繼續動畫直到完成，而不是立即停止。最後但並非最不重要的是：當您懸停時，請將鼠標移出，然後在動畫仍在繼續時再次懸停，在播放過程中不應重新啓動。

據我現在的理解，當我們創建動畫時我並沒有意識到，使用jQuery來控制GIF動畫非常困難。

我能想到的唯一的事情就是使用動畫的時間/持續時間。例如。如果動畫需要3秒鐘，那麼我們可以用GIF將靜態圖像（懸停時）替換爲這段時間。如果我們在img標籤中的數據屬性中傳遞持續時間，我們甚至可以爲所有GIF編寫通用腳本。但是這意味着需要編寫大量的代碼，而且這對我來說似乎不是最簡單的方式。

有沒有人有一個更簡單的方法來實現我們想要的想法？我期待着聽到你對這個問題的看法。

Answer 1

當你創建一個gif圖像時，你可以創建它，以便它只循環一次。

因此，要解決這個問題，請首先加載文件的靜態版本。當你將圖像懸停時，將其改爲gif圖像，並保持原樣，以便它可以完成其一次性動畫。

我不會使用任何時機。確切的時間很難預測，因爲有些電腦速度較慢，加載時間也應該考慮在內。

所以，解決方法：

• 作出這樣的循環只有一次GIF圖像（這是可以在圖像本身進行設置，如果你有正確的工具的屬性）。
• 最初顯示圖像的靜態版本。
• 在鼠標懸停上，向該元素添加一個類，以適用不同的樣式，將其更改爲不同的圖像，或者如果使用img元素，則更改src屬性。
• 保持原樣。根本不要刪除課程。
• Preload the image，所以當你將src從靜態圖像切換到動畫gif時沒有任何延遲。