2

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

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

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 不是很好。

4

2 回答 2

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 中。当一个元素被点击时，它被移动到lis 列表的开头，并且每个元素都根据它在列表中的新顺序重新定位。jQuery 的animate功能使得在这种位置变化期间添加动画变得很容易（它也比使用 css3 过渡更兼容浏览器）。

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

于 2013-04-24T18:31:05.980 回答
0

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

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

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

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

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

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

于 2013-04-24T18:30:22.220 回答