Jquery scrolling animation

Question

I have been assigned some work where I have to implement a kind of slot machine type scrolling on some blocks(divs) containing varying content. What I want to do is this: Every time I click a button/link,I want a column of 4 blocks(divs) to move up by a distance equal to the height of each block. I have been able to come up with the following for the basic functionality(thanks to an excellent answer right here on SO!) :

HTML

    <div class="slot" id="slot1">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block last">4</div>
</div>
<div class="slot" id="slot2">
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block last">8</div>
</div>
<div class="slot" id="slot3">
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
</div>
<div class="clear"></div>
<p><a href="#" id="nudge1">nudge1</a></p>
<p><a href="#" id="nudge2">nudge2</a></p>
<p><a href="#" id="nudge3">nudge3</a></p>

CSS

.block {
    height:58px;
    width:100px;
    color: #ccc;
    border: 1px solid #666;
    position:absolute;
}
.slot {
    height: 176px;
    width:100px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
    float:left;
}
.clear {
    clear:both;
}

p {
    display:inline;}
}

JS

$(document).ready(function() {

    $(".block").last().addClass("last");
    $(".slot").each(function() {
        var i = 0;
        $(this).find(".block").each(function() {
            var $this = $(this);
            $this.css("top", i);
            i += $this.height();
        });
    });

    $('#nudge1').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot1 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot1 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot1 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot1 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot1 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

        $('#nudge2').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot2 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot2 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot2 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot2 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

    $('#nudge3').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot3 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot3 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot3 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot3 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

});

Here is a fiddle for better reference. Clicking on 'nudge' animates the blocks to move up by a height equal to the height of each block. My problem is that this works just great for two blocks at a time right now and I can't figure out how to display more than that(3 specifically). Could anyone suggest me a way to do that here?

Answer 1

How is this? Demo. Made it much simpler, readable and extendable. Sorry I don't have access to jsfiddle in my current location.

HTML:

<div class="slot" id="slot1">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
</div>
<div class="slot" id="slot2">
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
</div>
<div class="slot" id="slot3">
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
</div>

<div class="clear"></div>

<div class="slotActionWrapper">
    <div class="slotActions">
        <a href="#" id="nudge1Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge1Down">&darr;</a>
    </div>
    <div class="slotActions">
        <a href="#" id="nudge2Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge2Down">&darr;</a>
    </div>
    <div class="slotActions">
        <a href="#" id="nudge3Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge3Down">&darr;</a>
    </div>
</div>

CSS:

.block {
    height:58px;
    width:100px;
    color: #ccc;
    border: 1px solid #666;
    float:left;
}

.slot {
    height: 176px;
    width:100px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
    float:left;
}

.slotActionWrapper {
    width: 306px;
}

.slotActions {
    width: 102px;
    text-align:center;
    float: left;
}

.slotActions a,
.slotActions a:visited {
    text-decoration: none;
    color: black;
}

.clear {
    clear:both;
}

JavaScript:

$(document).ready(function()
{
    $('#nudge1Up').on('click',function()
    {
        $('#slot1 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot1').append(firstElement);
        });
    });

    $('#nudge2Up').on('click',function()
    {
        $('#slot2 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot2').append(firstElement);
        });
    });

    $('#nudge3Up').on('click',function()
    {
        $('#slot3 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot3').append(firstElement);
        });
    });

    $('#nudge1Down').on('click',function()
    {
        var lastElement = $('#slot1 .block:last-child').detach();
        $('#slot1').prepend(lastElement);
        $('#slot1 .block:first-child').css('margin-top', '-60px');
        $('#slot1 .block:first-child').animate({marginTop: "+=60"}, 300);
    });

    $('#nudge2Down').on('click',function()
    {
        var lastElement = $('#slot2 .block:last-child').detach();
        $('#slot2').prepend(lastElement);
        $('#slot2 .block:first-child').css('margin-top', '-60px');
        $('#slot2 .block:first-child').animate({marginTop: "+=60"}, 300);
    });

    $('#nudge3Down').on('click',function()
    {   
        var lastElement = $('#slot3 .block:last-child').detach();
        $('#slot3').prepend(lastElement);
        $('#slot3 .block:first-child').css('margin-top', '-60px');
        $('#slot3 .block:first-child').animate({marginTop: "+=60"}, 300);
    });
});