Simple morphing button concept

Question

I have been making a jQuery morphing button type thing.

jsFiddle

$(document).ready(function() {

    var morphObject = {

        button: $('button.morphButton'),
        container: $('div.morphContainer'),
        overlay: $('div.overlay'),
        content: $('h1, p'),

        init: function() {
            this.buttonPress();
        },

        buttonPress: function() {
            var mO = morphObject;

            this.button.on('click', function() {

                mO.button.fadeOut(200);
                setTimeout(mO.containerMove, 200);

                });

        },

        containerMove: function() {
            var mO = morphObject;
                span = $('span.close');

            mO.overlay.fadeIn();

            mO.container.animate({
                top: 300,
                left: '50%',
                width: 600,
                height: 400,
                marginLeft: -300 },
                400, function() {
                    mO.content.fadeIn();
                    span.fadeIn();
                    mO.close();
            });

        },

        close: function() {
            var mO = morphObject;

            if ( mO.container.find('span.close').length ) return;

            $('<span class="close">X</span>').appendTo(mO.container);

            var span = $('span.close');

            mO.overlay.add(span).on('click', function() {
                mO.content.fadeOut();
                span.fadeOut();
                mO.overlay.fadeOut();
                setTimeout(mO.animateBack, 200);
            });

        },

        animateBack: function() {
            var mO = morphObject;

            mO.container.animate({
                top: 150,
                left: '20%',
                width: 200,
                height: 70,
                marginLeft: -100 },
                400, function() {
                    mO.button.fadeIn(300);
            });

        }

    }

    morphObject.init();

});

Basically, I would love to have any feedback on what I can improve. Please tell me if I have used any bad coding practises or methods which will cause slow performance.

Answer 1

Looks pretty clean for me.

the only improvement i suggest, is avoid the animateBack harcode position. Maybe you can save before the animation start, and then, back to the last position.

    containerMove: function() {
        var mO = morphObject;
        mO.overlay.fadeIn();

        startPosition = {
            top: morphObject.top(),
            left: morphObject.left(),
            width: morphObject.width(),
            height: morphObject.height(),
            marginLeft: ....
        };

        mO.container.animate({
            top: 300,
            left: '50%',
            width: 600,
            height: 400,
            marginLeft: -300 
        },
        400, 
        function() {
                mO.content.fadeIn();
                span.fadeIn();
                mO.close();
        });

    },
    animateBack: function() {
        var mO = morphObject;
        mO.container.animate(startPosition);
    }

Also, for my suggestion is a little anoying using a literal object { }, you can use a constructor new function () {} is better for set properties and handle scopes.