【jQuery】スロットモーション2

HTML

<div id="mholder">
    <div class="marqueeElement">1st</div>
    <div class="marqueeElement" style="height:78px">2nd</div>
    <div class="marqueeElement" style="height:98px">3rd</div>
    <div class="marqueeElement" style="height:38px">4th</div>
</div>
<p><a href="#" id="start">start</a></p>

CSS

.marqueeElement {
    height:58px;
    width:58px;
    color: #ccc;
    border: 1px solid #666;
    position:absolute;
}
#mholder {
    height: 120px;
    width:60px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
}

JavaScript

$(document).ready(function() {
    var i = 0;
    $(".marqueeElement").last().addClass("last");
    $(".marqueeElement").each(function() {
          var $this = $(this);
          $this.css("top", i);
          i += $this.height();
    });
    
    var me = $(".marqueeElement");
    $('#start').click(function(){
        doScroll(me);
    });
});

    function doScroll($ele) {
        var top = parseInt($ele.css("top"));
        if(top < -80) { //bit arbitrary!
            var $lastEle = $(".last");
            $lastEle.removeClass("last");
            $ele.addClass("last");
            var top = (parseInt($lastEle.css("top")) + $lastEle.height());
            $ele.css("top", top);
        }
        $ele.animate({ top: (parseInt(top)-60) },100,'linear', function() {doScroll($(this))});
    }