jQuery Transitions - presenter object

presenter object with jquery transition animations

HTML

<button id="showA">show A</button><button id="showB">show B</button>

<div class="view-container">
    <div id="A" class="view">VIEW A</div>
    <div id="B" class="view">VIEW B</div>
    <div id="C" class="view">VIEW C</div>
<div>

CSS

/*
    opacity:0; 
    visibility:hidden;
    margin-left:0; 
*/

JavaScript

// Depends on
//  jQuery
//
// Conventions
//  1) all HTML tags that represent views must use the CSS class .view
//  
var presenter = (function() {
    var
        options = {
            fadeOut: 100,
            floatIn: 500,
            offset: '15px',
            ease: 'swing'
        },
        resetViews = function() {
            $('.view').css({
                marginLeft: options.offset,
                opacity: 0
            })
        },
        entranceThemeTransition = function($view) {
            $view.css({
                display: 'block',
                visibility: "visible"
            }).addClass('view-active').animate({
                marginLeft: 0,
                opacity: 1
            }, options.floatIn, options.ease);
        },
        transitionTo = function(view) {
            var $view = $(view);
            var $activeViews = $('.view-active');
            if ($activeViews.length){
                $activeViews .fadeOut(options.fadeOut, function() {
                    resetViews();
                    entranceThemeTransition($view);
                });
                $('.view').removeClass('view-active');
            }else{
                resetViews();
                entranceThemeTransition($view);
            }
        };
    return {
        options: options,
        transitionTo: transitionTo
    }
})();


$('#showA').click(function() { presenter.transitionTo('#A') } );
$('#showB').click(function() { presenter.transitionTo('#B') } );

presenter.transitionTo('#A');