Question

我一直在为我正在为朋友建造的网站上的导航想法。这一切都将在一个页面上，各种导航链接只是在点击时显示/隐藏内容。

我正在寻求帮助，但是，点击链接后动画导航动画 - 我在下面创建了一个模型：

正如你所看到的，我有一堆盒子，每盒都小于最后一盒。如果你单击其中一个链接，它会自动跳转到外边框，原来在它上面/外面的所有东西，现在出现在它下面/里面。

我为此创建的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点击监听器。我通过委托事件来解决这个问题，如下所示：

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

Answer 2

由于您正在克隆元素，因此需要使用事件委派：

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

这是你的问题，但不是你原来的小提琴。

但是，只需将选定的li（及其后面的项目）添加到列表中，就可以省去很多麻烦。这样做会移动现有元素，无需克隆任何内容。

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

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

动画我的时髦菜单

2 个答案: