Flightboard effect with jQueryUI and CSS

HTML

<div class="flightboard"></div>
<button class="flip">flip</button>

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono:700);
 .flightboard .board {
    font-size:500%;
}
.flightboard .board {
    color: white;
    display:inline-block;
    padding: 0 0.1em;
    position:relative;
    float:left;
    font-family:'Ubuntu Mono', courier;
    border: 1px solid silver;
    background: black;
    -webkit-border-radius: 0.15em;
    -moz-border-radius: 0.15em;
    border-radius: 0.15em;
}
.flightboard .board > .axis {
    border-bottom: 1px solid silver;
    display:inline-block;
    width:100%;
    height:50%;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
    z-index: 4;
}
.flightboard .board > .flap {
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    display:inline-block;
    width:100%;
    position:absolute;
    left:0;
    margin:0;
    padding:0;
    background: black;
    z-index:3;
}
.flightboard .board > .front, .flightboard .board > .back {
    text-align:center;
}
.flightboard .board > .front {
    position:relative;
    width:100%;
}
.flightboard .board > .front.open {
    opacity: 1;
}
.flightboard .board > .front.close {
    opacity: 0;
}
.flightboard .board > .back {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1;
    overflow:hidden;
}
.flightboard .board > .back.close {
    height:0%;
}
.flightboard .board > .back.open {
    height:100%;
}
.flightboard .board .top {
    height:50%;
    bottom:50%;
    opacity: 0;
}
.flightboard .board .middle1 {
    height:0%;
    opacity: 1;
}
.flightboard .board .middle2 {
    height:0%;
    opacity: 1;
    top:50%;
    bottom:inherit;
}
.flightboard .board .bottom {
    opacity: 0;
    height:50%;
}

JavaScript

/**
 * jquery.flightboard.js v1.0.0
 * http://productive.me
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Jaco Swarts
 * http://productive.me
 */;
(function ($) {

    $.FlightBoard = function (options, element) {
        this.$el = $(element);
        this._init(options);
    };

    $.FlightBoard.defaults = {
        // the transition speed in miliseconds
        speed: 800,
        // the characters to display on the board
        text: ''
    };

    $.FlightBoard.prototype = {
        _init: function (options) {
            this.options = $.extend(true, {}, $.FlightBoard.defaults, options);
            this.options.text = this.options.text.toString();
            this._createBoards('', this.options.text);
            this.$el.addClass('flightboard');
        },
        _createBoards: function (oldText, newText) {
            var self = this;
            for (_i = oldText.length, _len = newText.length; _i > _len; _i--) {
                this.$el.find('.board').last().hide(this.options.speed / 2, function () {
                    $(this).remove();
                });
            }
            for (_i = oldText.length, _len = newText.length; _i < _len; _i++) {
                c = newText[_i];
                this.$el.append($('<div class="board"><div class="front open">' + c + '</div><div class="back close"></div><div class="flap top"></div><div class="axis"></div></div>'));
            }
        },
        change: function (text) {
            var self = this;
            self._createBoards(self.options.text, text.toString());
            self.options.text = text.toString();
            this.$el.find('.back').each(function (idx) {
                $(this).text(self.options.text[idx] || '');
            });
            this.$el.find('.board').each(function (idx) {
                var board = this;

                var $flap = $(board).find('.flap'),
                    $front =...