4
\$\begingroup\$

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.

\$\endgroup\$
2
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ Thanks so much! Very useful. Ive just thought to myself, 'how would I use this concept on several buttons on the page?'. Would it be too performance consuming to copy paste the code loads of times and change the variables? \$\endgroup\$ – George Mar 21 '15 at 11:10
  • 1
    \$\begingroup\$ @George Size and initial position of the div should be taken from the button programmatically (i.e. should not hardcoded in CSS) before animation. This also has the beneficial effect of relieving you from hard coding the size and position of the button. \$\endgroup\$ – abuzittin gillifirca Mar 23 '15 at 7:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.