jQuery的動畫幫助

Question

我想建立以下，

基本上會發生什麼是白色的文字底下的暗綠色欄應增長和收縮依賴於哪一個環節是活動的，因此，例如目前，JOBWALL鏈接處於活動狀態，因此綠色條橫跨該鏈接的寬度。我該如何實現這種效果，是否可以爲創建綠色欄的背景圖像創建動畫，以便當頁面從左至右加載動畫時，直至它停留在活動頁面下方？

任何幫助將是偉大的。

Answer 1

下面是可能會爲你工作總體思路：

1. 創建一個ID whitebar一個div。樣式 它具有正確的高度和寬度， 並設置bg顏色。

2. 將另一個div嵌入到白色條中 id綠色條。使它的頁面標題寬度達到 。將bg顏色 設置爲綠色。

3. 現在用 標準的jQuery動畫技術

動畫綠色條如果標題是您可能需要在開始或動畫的結束調整greenbar寬度相等的沒有。

編輯：這裏是一個rough sketch

Answer 2

您可以用jQuery做到這一點。就是這樣。

首先爲每個菜單項設置一個元素，它將成爲綠色條。你必須用CSS正確定位它。將此元素的背景顏色設置爲深綠色，並將寬度設置爲零（以便默認情況下不可見）。

然後，提供一個回調的菜單項onmouseover事件：

<div class="menu-item" onmouseover="menuRollover(this)" >...</div> 

在回調

function menuRollover(el){ 
    $(el).find(".green-bar").animate({'width':60}, 200) 

這將酒吧的寬度動畫，以60像素，在一段200毫秒。

Answer 3

我以前從來沒有做過這件事，前段時間跑過這個問題，很好奇，並去jsfiddle自己嘗試一下。這裏是我想出了http://jsfiddle.net/robx/dXZxN/4/使用幾種不同的顏色來動畫，但你可以很容易地適應你的需求。