Difficulty getting spinner working the way I need
<p>I've been working a few days on this spinner control, though I haven't had very much luck getting it to work the way I need.  It was originally code I found elsewhere, and repurposed for my own needs - so it's just a little bit over my head.  </p>

<p>HTML: </p>

<pre><code>&lt;ul class="picker"&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;1st Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;2nd Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;3rd Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem win"&gt;&lt;span class="value"&gt;4th Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;5th Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;6th Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;7th Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;8th Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;9th Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem"&gt;&lt;span class="value"&gt;10th Item Test&lt;/span&gt;&lt;/li&gt;
    &lt;li class="pickerItem last"&gt;&lt;span class="value"&gt;11th Item Test&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="clear"&gt;&lt;/div&gt;
&lt;p&gt;&lt;a href="#" id="start"&gt;start&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Position: &lt;span id="position"&gt;0&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Speed: &lt;span id="speed"&gt;0&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;Deceleration: &lt;span id="deceleration"&gt;0&lt;/span&gt;&lt;/p&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>var marqueeRunning = false;
var winElement;
var fullSpeed = 60;
var speed = fullSpeed;
var deceleration = 3;
var rotationTotal = 10;
var currentRotation = 0;

$(document).ready(function() {

winElement = $(".pickerItem.win");
$(".pickerItem").last().addClass("last");
$(".picker").each(function() {
    var i = 0;
    $(this).find(".pickerItem").each(function() {
        var $this = $(this);
        $this.css("top", i);
        i += $this.height();
    });
});

$('#start').click(function() {
    if (!marqueeRunning) {
        speed = fullSpeed;
        $("#speed").html(speed);
        //marqueeRunning = true;                
        var countScrolls = $('.picker .pickerItem').length;

        marqueeRunning = true;
        for (var i = 0; i &lt; countScrolls; i++) {
            doScroll($('.picker .pickerItem:nth-child(' + i + ')'));
        }

        setTimeout
        (
            function()
            {
                marqueeRunning = false;
            }, 
            1000
        );
    }
});
});

function slowDown()
{
var currentTop = Math.floor(winElement.css("top").replace("px",""));
/* -- Bounce Effect
if (currentTop != 0)
{
    newSpeed = speed;
    if (Math.abs(currentTop) &lt; Math.abs(speed *4)) newSpeed = Math.floor(Math.abs(speed) - deceleration);
    if (newSpeed === 0)
    {
        newSpeed = speed;
    }
    if (currentTop &gt; 0)
    {
       speed = Math.floor(Math.abs(newSpeed));
    }
    else
    {
       speed = -Math.floor(Math.abs(newSpeed));
    }
    if (Math.abs(currentTop) &lt; 3 &amp;&amp; Math.abs(speed) === 3) speed = currentTop;
}
*/
$("#speed").html(speed);
if (currentTop === 0)
{
    speed = 0;
    $("#speed").html(speed + " (complete)");
}
}

function doScroll($ele) {
//alert($ele.css("top"));
var top = parseInt($ele.css("top"));
//console.log(' Outside - ' + top + ' &lt; -' + 3*fullSpeed);

if (top &lt; -(3 * fullSpeed)) { //bit arbitrary!
//console.log(' Inside - ' + top + ' &lt; -' + 3*fullSpeed);
    var $lastEle = $ele.closest('.picker').find(".last");
    $lastEle.removeClass("last");
    $ele.addClass("last");
    var top = (parseInt($lastEle.css("top")) + $lastEle.height());
    $ele.css("top", top);
}
$ele.animate({
    top: (parseInt(top) - speed)
}, 100, 'linear', function() {
    $("#position").html(winElement.css("top"));
    if ($ele.get(0) === winElement.get(0) &amp;&amp; marqueeRunning === false) setTimeout(slowDown, 10);
    if (marqueeRunning || (Math.floor(winElement.css("top").replace("px","")) !== 0 &amp;&amp; speed !== 0)) doScroll($(this))
});
 }
</code></pre>

<p>​
You can view the current version here:  <a href="http://jsfiddle.net/STLCajun/FYWtb/" rel="nofollow">http://jsfiddle.net/STLCajun/FYWtb/</a></p>

<p>What I'm trying to do is get the spinner to spin, and then after 5-6 rotations, slow down to the list item with the class "win" in the middle.   Can someone point me in the right direction.   Also, I'm not sure why, but it's throwing a gap after the first set of items, and I'm not sure how t get rid of it.</p>

<p>Any help would be greatly appreciated.</p>
