CSS可能jQuery的幫助

我的設計師設計了以下導航CSS可能jQuery的幫助

navigation bar

他缺乏它implmented從而使導航下方的暗條動畫網頁加載（認爲進度條）當前頁面。使用PHP沒有明顯的我可以排序它，使目前的a有一個類，所以我可以識別當前頁面，但我不知道如何我可以動畫導航下的酒吧，有沒有人有任何建議？

來源

2011-04-11 sea_1987

你熟悉使用jQuery。 – Gary 2011-04-11 08:17:28

我有jquery的知識是的，但我不確定如何讓它動畫到正確的位置 – 2011-04-11 08:19:20

你的意思是你想讓黑條滑過頁面加載當前頁面鏈接？在這種情況下，我不完全確定「動畫」的含義。 – 2011-04-11 08:22:15

對不起，我會在這裏發佈。

我認爲你需要div內的div。外部div（表示導航下的整行）將需要是總導航的寬度。然後，您可以使用jquery將內部div（進度條）設置爲與上面的nav元素相同的寬度，並將其左側的位置動畫到您添加了類的導航項目的左側位置。

像

$(document).ready(function(){ 

    $('.selectedNav').click(function(){ 

    var navWidth = $(this).width(); 
    var posLeft = $(this).position(); 

    $('#innerDiv').animate({'width': navWidth, 'left': posLeft.left}); 

    }); 

});

來源

2011-04-11 08:26:21 Gary

製作的形象是你的綠框，文本和酒吧「切出」（例如透明）
地方，爲<div style="position:relative;">
地方另一個DIV在那一個：<div style="position:absolute;top:0px;left:0px;height:100%;" id="progress">
設置你的「進步」div的寬度爲步驟1爲90px，步驟2爲195px，步驟3爲278px，步驟4爲414px
如果需要，請使用jQuery的動畫設置：$.animate({width: 195})以使其滾動。

這樣做，你的酒吧和文字都會移動。

如果你不關心文本，跳過圖像部分，只是做一個灰色的div做相同的事情。

有關動畫效果，請參見www.vouchr.com。

來源

2011-04-11 08:26:28

你可以試試這個jQuery插件： http://grasshopperpebbles.com/ajax/a-jquery-progress-bar-plugin/

來源

2011-04-11 08:34:00 w1ng

CSS可能jQuery的幫助

回答

相關問題