設置時間後淡出圖像以顯示菜單

Question

我可以通過淡入淡出的gif動畫來顯示菜單和靜態圖標嗎？我希望淡入淡出時間發生在GIF動畫有時間播放一次之後。然後它會消失 - 或者更好 - 淡入淡出菜單和靜態標誌。謝謝。

Answer 1

它是一個<img>元素？如果是這樣的：

• 如果刪除<img>元素，頁面將回流和按鈕將會向上移動到「行雲流水」。
• 如果您使用display: none，圖像將不可見，並且不會佔用空間（頁面將重新排列，就像刪除了<img>一樣）。
• 如果您使用visibility: hidden，<img>將不可見，但會保留原位。按鈕將保持在不可見圖像下方。

要刪除元素或使用JavaScript編輯其CSS，首先需要獲取對其的引用。一種方法是給它一個id並使用getElementById。然後您可以操縱其style property或remove it from the DOM。

關於何時完成gif動畫的檢測：我無法知道如何使用JavaScript和常規gif <img>元素來檢測此操作。你將不得不依靠setTimeout。由於加載時間每個訪客的不同，你可以開始超時當圖像具有finished loading：

<img src="img/animation.gif" id="disappearing_image" /> 

var img = document.getElementyById('disappearing_image'); 
var runtime = 1200; // in milliseconds 

img.onload = function() { 
    setTimeout(function() { 
     $(img).fadeOut("slow"); 
    }, runtime); 
    img.onload = null; 
}; 

這將淡出圖像與後runtime毫秒給出id（「disappearing_image」）。

請注意，一旦處理完事件，我會將onload處理程序重新設置回null。這是因爲Internet Explorer將在加載圖像時首先觸發此事件，然後再對動畫的每個幀進行。

最後一個注意事項：不同的瀏覽器可能會加載不同的動畫gif。例如，一個瀏覽器可以在開始動畫之前加載整個文件，而另一個瀏覽器可以在加載時對圖像進行動畫處理，然後觸發onload並再次進行動畫處理。如果遇到麻煩，您可以查看預加載您的圖像（在SO上搜索「[javascript] preload img」）。