頁面加載后淡入導航

Question

我正在嘗試創建一個導航菜單，其中在頁面加載后，每個“按鈕”都按順序淡入。 我已經做了很多Google搜索，但還沒有找到與我想要的東西完全一樣的東西。 大多數都與僅對按鈕本身進行動畫處理（即，懸停時更改字體顏色或背景顏色）有關。 我要做的是，一旦頁面加載，子菜單“按鈕”就會淡入頁面頂部。 我覺得這可以簡單地通過CSS來完成（也許使用javascript，盡管我對此不太滿意，所以請對任何想法都非常清楚:-)），而無需添加jquery。 我沒有使用任何花哨的軟件，只是基本的html編碼。

Answer 1

您考慮過jQuery嗎？ jQuery具有您可能感興趣的fadeIn函數以及許多其他有趣的功能。

這是我想使用jQuery的示例。 http://jsfiddle.net/ngzmy/1/

就像其他人所說的那樣，您的另一個選擇是CSS轉換，並非所有瀏覽器都支持。

Answer 2

您可以僅使用CSS動畫來執行此操作，但並非在所有瀏覽器中都可以使用。 設置動畫，然后為每個按鈕逐漸分配更長的延遲時間。 這可能不是您想要的確切外觀。

如果您使用js路由，則可以使其在跨瀏覽器中更好地工作。 我建議您繼續使用jquery-它並不龐大，並且使這種方法的任務更加容易。 我會這樣處理您的問題：

1. 將所有按鈕的初始狀態設置為opacity = 0。 （編輯：否。請參見下面的評論。）
2. 依次為每個按鈕調用淡入功能，如果需要，可以在它們之間適當延遲幾毫秒。

您的淡入功能應該只是一個循環，用於為其傳遞的元素設置不透明度。 每次迭代應將不透明度增加一定數量，並在兩次迭代之間適當延遲。 如前所述，jquery帶有fadeIn（）函數。

希望這可以幫助。