jquery - 动画我的时髦菜单

Question

我一直在为我为 friend 构建的网站上的导航考虑一个想法。一切都将在一个页面上，各种导航链接只是在单击时显示/隐藏内容。

但是，我正在寻求帮助，一旦单击链接就为导航设置动画 - 我在下面创建了一个模型:

http://jsfiddle.net/LimeBlast/pp9Hk/

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

我为此创建的 jQuery 如下:

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

我不知道这是否是正确的方法，但它似乎有效 - 我现在想要实现的就是向其中添加某种类型的动画效果，即:让所选元素慢慢地使其到达外部边缘，因为其上方的元素出现在内部...

(如果你明白我的意思吗？)

有人可以帮我解决这个问题吗？我不太擅长 jQuery。

Answer 1

我注意到的一个问题是每个菜单项只能选择一次，因为您的克隆版本不会附加 jQuery 单击监听器。我通过委托(delegate)事件解决了这个问题，如下所示:

$('#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/

更新

我尝试制作动画。此处演示:http://jsfiddle.net/mchail/pp9Hk/5/

我将定位从 css 移到了 javascript 中。单击某个元素时，它会移动到 li 列表的开头，并且每个元素都会根据其在列表中的新顺序重新定位。 jQuery 的 animate 函数可以轻松地在位置更改期间添加动画(它也比使用 css3 过渡更兼容浏览器)。

如果您想使用缓动，请查看此处的 animate 文档:http://api.jquery.com/animate/