动画我的时髦菜单

我一直在为我的朋友建立的网站上的导航想法玩弄。这一切都将在一个页面上，各种导航链接只是简单地显示/隐藏点击的内容。动画我的时髦菜单

我在寻找帮助的，但是，一旦动画链接被点击导航什么 - 我已经创建了一个实体模型如下：

正如你所看到的，我有一堆盒子，每个都比最后一个小。如果您点击其中一个链接，它会自动跳转到外边框，其中所有内容都位于其上方/外部，现在显示在其下方/内部。

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

动画我的时髦菜单

回答

相关问题