Question

I was debating a few methods for emulating a “Price is Right” type wheel or style UIPicker functionality.
That said I do not need the whole dialog and color schemes from a UIPicker plugin. I just need to be able to animate through a couple images to replicate the spinning of a wheel.

As an example lets say this is my list:
1984
1985
1987
1990
1994

and Lets say that these numbers are on screen:

1985
1987
1990

and when the user clicks 1990 the list slides up taking 1985 off screen while 1994 comes on screen. Leaving us with:

1987
1990
1994

Then when the user clicks 1994 the list slides up again and 1987 leaves the screen and 1984 comes on to the screen. Alternatively the list could slide down as well… So what would be the preferred way to accomplish this? I’ve debated an infinite scroller and a set of oversized images (that would be inside a smaller div to limit it’s onscreen section) for each combination that could slide up/down and then swap out for the new combination and to be ready for the next selection.

Answer 1

I suppose there are a good few ways to do this successfully. Personally I would just have a callback on jQuery animate that uses insertAfter to take the first item and append it to the end, whilst also modifying the relative position of the list. This works and is only a few lines of code, but it depends on how smooth you want it to be.

Something like:

var $length = $('.list li').length--;
$('#foo').click(function(){
    $('.list').animate({
        top:'-30px'     
    },function(){
        $('.list li').eq(0).insertAfter($('.list li').eq($length));
        $('.list').css('top','0px');
    });
});

Works but it’s off the top of my head, there’s probably a smoother way of doing that.