Div Elevator

A quick jquery script with example that demonstrates sliding divs up and down between one container and the next.

HTML

<div id="building">
    <div id="top" class="floor">
        <div class="rider">
            <input type="checkbox" class="upDownButton" checked>
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton" checked>
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton" checked>
        </div>
    </div>
    <div id="bottom" class="floor">
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
        <div class="rider">
            <input type="checkbox" class="upDownButton">
        </div>
    </div>
</div>

CSS

#building {
    width: 600px;
    position: relative;
}
.rider {
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: right;
    position: relative;
}
.floor {
    min-height: 200px;
    background-color:papayawhip;
    border: 2px solid gray;
}

JavaScript

// I made this as verbose as possible so it 
// would be clear what was being done
$('.upDownButton').click(function () {
    // moving from the bottom up
    if ($(this).is(':checked')) {
        // get the current div that we 
        // want to move and it's positions
        var car = $(this).closest('.rider');
        var cLeft = $(car).position().left;
        var cTop = $(car).position().top;
        var cWid = $(car).width();

        // make a copy of the div you want to move and set the clone to 
        // absolute positioning and match it's location to the original
        // we make a random id for the clone so users can click often
        var cloneId = 'carClone' + Math.round(Math.random() * 100000);
        $(car).clone().appendTo('#building').attr('id', cloneId);
        $('#' + cloneId).css({
            position: 'absolute',
            left: cLeft,
            top: cTop,
            width: cWid,
            border: '1px solid #4169E1'
        });

        // temporarily hide the one we're moving
        $(car).css('visibility', 'hidden');

        // get the location of where it should move to, 
        // moving to the top is easy, just move it to top: 0px
        $('#' + cloneId).animate({
            top: '0px'
            // time of 1 second
        }, 1000,
        // when the animation ends
        function () {
            // move the real one to the new 
            // location and and make it visible again
            $(car).appendTo('#top');
            $(car).css('visibility', 'visible');
            // remove the clone
            $('#' + cloneId).remove();
        });
    } else {
        // moving from the top down
        // get the current div and it's positions
        var car = $(this).closest('.rider');
        var cLeft = $(car).position().left;
        var cTop = $(car).position().top;
        var cWid = $(car).width();

        // clone the div you want to move and set the clone to 
        // absolute positioning and...