JQuery - 一个连续的滚动导航，除了它不太管用

Question

我正在尝试构建一个永远不会结束的导航窗口 - 主导航区域内的每个链接都是一个 block ，有滚动按钮​​，当您向上滚动时，从顶部滚动的元素被分离并重新- 附在底部。同样，如果您向下滚动，同样的事情会反过来发生，底部元素消失并重新出现在顶部。

我可以通过分离和附加来完成这项工作，但它缺乏技巧 - 所以它需要动画。问题是，无论我尝试为它制作动画，都会导致菜单很快搞砸。我正在为每个元素制作“顶部”CSS 动画以提供视觉效果，然后分离对象，重置将 CSS“顶部”设置为零，并重新附加对象。

从我使用 firebug 的测试来看，'top' 值似乎没有被重置，这导致整个菜单出现问题......

这是我正在使用的基本设置的 fiddle - 减去所有其他对你不重要的样式:

http://jsfiddle.net/CSVt6/

下面是代码的要点:

<div id='navigation'>
    <div id='scrollUp'>UP</div>
    <ul>
        <li>Nav Item 1</li>
        <li>Nav Item 2</li>
        <li>Nav Item 3</li>
        <li>Nav Item 4</li>
        <li>Nav Item 5</li>
    </ul>
    <div id='scrollDown'>DOWN</div>
</div>

JQuery(准备好文档):

var itemHeight = $("#navigation ul li:first").outerHeight();

$("#scrollUp").click(function() {
  navScrollUp();
});

$("#scrollDown").click(function() {
  navScrollDown();                       
});


function navScrollUp() {
    $("#navigation ul li").animate({top: "-="+itemHeight});
    slice = $("#navigation ul li:first").detach();
    $("#navitation ul li").css("top","0px");
    $("#navigation ul").append( slice );
}

function navScrollDown() {
    $("#navigation ul li").animate({top: "+="+itemHeight});
    slice = $("#navigation ul li:last").detach();
    $("#navitation ul li").css("top","0px");
    $("#navigation ul").prepend( slice );    
}

任何人都可以建议我在这里做错了什么吗？

Answer 1

看看这个:

http://jsfiddle.net/CSVt6/10/

我只让它适用于 up 但想法是一样的。我没有对每个 li 进行动画处理，而是将其更改为对 ul 进行动画处理。不过，根本的变化是我克隆了要删除的元素。为了实现最流畅的滚动，您确实需要一个元素的副本，以便它开始出现在底部，同时它仍在顶部消失。

在第一个动画完成之前，您还需要处理多次点击，但这应该是一个好的开始。