動畫我的時髦菜單

我一直在爲我的朋友建立的網站上的導航想法玩弄。這一切都將在一個頁面上，各種導航鏈接只是簡單地顯示/隱藏點擊的內容。動畫我的時髦菜單

我在尋找幫助的，但是，一旦動畫鏈接被點擊導航什麼 - 我已經創建了一個實體模型如下：

正如你所看到的，我有一堆盒子，每個都比最後一個小。如果您點擊其中一個鏈接，它會自動跳轉到外邊框，其中所有內容都位於其上方/外部，現在顯示在其下方/內部。

jQuery的我創建要做到這一點，如下所示：

$('#navigation').on('click', 'li', function(){ 
    var $self = $(this); 
    $self.prevAll().addClass('clone'); 
    $('.clone').clone().removeClass('clone').appendTo('#navigation'); 
    $('.clone').remove(); 
});

我不知道這是否是做了正確的方式，但它似乎工作 - 所有我想要實現現在是一些類型的動畫效果將被添加到它，即：對於所選元素緩慢進入外部邊緣，因爲它上面的元素出現在裏面...

（如果你知道我是什麼是什麼意思？）

有誰能幫我解決這個問題嗎？我對jQuery不太瞭解。

來源

2013-04-24 Daniel Hollands

不太你問什麼，但的TW是一個解決的問題。有關在TiddlyWiki中實施的網站示例，請參見http://tiddlywiki.com/#Examples或http://giffmex.tiddlyspot.com/#%5B%5BTiddlyWiki%20Showcase%5D%5D。 – 2013-04-24 18:30:14

[你試過什麼]（http://whathaveyoutried.com）就動畫而言？順便說一句，你不需要做所有的克隆 - 只需在被單擊的元素前添加它就會被移動到列表的開頭。 http://jsfiddle.net/mblase75/8KrHh/ – Blazemonger 2013-04-24 18:32:24

既然你克隆的元素，你需要使用事件代表團：

$('#navigation').on('click', 'li', function(){

這是你的問題，而不是在原來的提琴。

但是，只需將選定的li（及其後的項目）預先添加到列表中，您就可以節省很多麻煩。這樣做會移動現有元素，消除克隆任何事物的需要。

var $self = $(this); 
$self.nextAll().addBack().prependTo('#navigation');

http://jsfiddle.net/mblase75/8KrHh/

來源

2013-04-24 18:30:22 Blazemonger

一個問題，我注意到的是，每個菜單項只能選擇一次，因爲你的克隆版本不會有jQuery的點擊添加監聽。我固定，通過委託的情況下，像這樣：

$('#navigation').on('click', 'li', function() { 
    var $self = $(this); 
    $self.prevAll().addClass('clone'); 

    $('.clone').clone().removeClass('clone').appendTo('#navigation'); 
    $('.clone').remove(); 
})

演示在這裏：http://jsfiddle.net/mchail/pp9Hk/4/

UPDATE

我花了一條縫在做動畫。在這裏演示：http://jsfiddle.net/mchail/pp9Hk/5/

我將定位移出了CSS並放到了javascript中。當一個元素被點擊時，它被移動到li列表的開始處，並且每個元素根據列表中的新順序被重新定位。 jQuery的animate函數使得在定位變化過程中添加動畫變得很容易（與使用css3轉換相比，它更具有瀏覽器兼容性）。

退房的animate文檔在這裏，如果你想用寬鬆玩：

來源

2013-04-24 18:31:05 mchail

這實際上是非常整潔，現在我玩它。酷導航的想法。 – mchail 2013-04-24 18:50:21

動畫我的時髦菜單

回答

相關問題