Question

I’m trying to build a navigation window that never appears to end – each link within the main nav area is a block, there are scroll buttons and when you scroll up, the item that scrolls off the top is detached and re-attached to the bottom. Likewise, if you scroll down the same thing happens in reverse, bottom item disappears and re-appears at the top.

I can make this work just by detaching and appending, but it lacks finesse – so it needs animation. The problem is, whatever I try to do to animate it results in the menu screwing itself up fairly quickly.. I’m animating the ‘top’ css for each element to provide the visuals, with the idea of then detaching the object, resetting the CSS ‘top’ to zero, and re-attaching the object.

From my tests using firebug, it seems that the ‘top’ value isn’t being reset, which is causing the whole menu to go out of whack…

Here’s a fiddle of the basic setup i’m working with – less all the other styling thats not important to you:

http://jsfiddle.net/CSVt6/

And here’s the jist of the code:

<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 (on document ready):

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 );    
}

Can anyone suggest what i’m managing to do wrong here?

Answer 1

Have a look at this:

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

I only made it work for up but the idea is the same. Rather than animating each li I changed it to animate the ul. The fundamental change though is that I clone the element being removed. For the smoothest scrolling you really need to have a copy of the element so that it starts to appear on the bottom while it is still disappearing on the top.

You will also need to deal with clicking multiple times before the first animation finishes, but this should be a good start.