jQuery-连续滚动导航，除了不能正常工作

如何解决jQuery-连续滚动导航，除了不能正常工作

| 我正在尝试构建一个永远不会消失的导航窗口-主导航区域中的每个链接都是一个块，有滚动按钮​​，当您向上滚动时，从顶部滚动到顶部的项目将被分离并重新连接至底部。同样，如果向下滚动，则相同的事情反向发生，底部的项目消失，并重新出现在顶部。 我可以通过分离和附加来完成这项工作，但是它缺乏技巧-因此需要动画处理。问题是，无论我如何做动画处理，菜单都会很快搞砸。.我正在为每个元素的\'top \'cs设置动画，以提供视觉效果，然后分离对象，将CSS \“ top \”重置为零，然后重新附加该对象。 从我使用Firebug进行的测试来看，似乎似乎没有重置\'top \'值，这导致整个菜单都乱七八糟。 这是我正在使用的基本设置的小提琴-减去所有对您不重要的其他样式： 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 );    
}

谁能建议我在这里做错了什么？     

解决方法

        看看这个： http://jsfiddle.net/CSVt6/10/ 我只让它适用于

up

，但是想法是一样的。我没有为每个ѭ3动画，而是将其动画为to4ѭ。不过，根本的变化是我克隆了要删除的元素。为了最流畅地滚动，您确实需要有一个元素的副本，以便该元素开始显示在底部，而该元素仍在顶部消失。 在第一个动画完成之前，您还需要处理多次单击，但这应该是一个好的开始。     ,        有几件事。 首先，它使您更容易为

<ul>

动画，而不是ѭ6mate标签。通过执行以下操作来更改此设置：

<div id=\'navigation\'>
    <div id=\'scrollUp\'>UP</div>
    <div id=\"container\">
        <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>
    <div id=\'scrollDown\'>DOWN</div>
</div>

和CSS：

...

#container {
    height: 100px;
    overflow: hidden;
}
ul {
    height: 100px;
    position: relative;
}
ul li {
    height: 20px;
}

其次，您在某些javascript中拼错了\“＃navigation \”。解决该问题（并进行更改以补偿上面的更改），您的JavaScript如下所示：

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

function navScrollDown() {
    slice = $(\"#navigation ul li:last\").detach();
    $(\"#navigation ul\").prepend( slice );   
    $(\"#navigation ul\").css(\"top\",-1*itemHeight);
    $(\"#navigation ul\").animate({top: \"+=\" + itemHeight});
}

这些应该使您与尝试做的事情不相上下。这是小提琴：http://jsfiddle.net/CSVt6/16/