jQuery morphing button concept

Question

I have written some jQuery that will morph a button into a container when clicked. I now want to use the same script but on a different button. I am not sure the best way to do this though. Would it be to copy and paste the whole morphObject and then change the bits which need changing for the new button, and then run both the object's init functions?

Here is the Fiddle: https://jsfiddle.net/2a3rp590/

Here is the jQuery:

$(document).ready(function() {

    var morphObject = {

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

        endPosition: {
            top: 100,
            left: '50%',
            width: 600,
            height: 400,
            marginLeft: -300
        },


        init: function() {
            var mO = morphObject,
                button = mO.button;

            button.on('click', function() {
                button.fadeOut(200);
                setTimeout(mO.containerMove, 200);
            });

        },

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

            overlay.fadeIn();

            container.animate(mO.endPosition, 400, function() {
                    content.fadeIn();
                    span.fadeIn();
                    mO.close();
            });

        },

        close: function() {
            var mO = morphObject,
                container = mO.container,
                overlay = mO.overlay,
                content = mO.content;

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

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

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

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

        },

        animateBack: function() {
            var mO = morphObject,
                container = mO.container;
                button = mO.button;

            container.animate(mO.startPosition, 400, function() {
                    button.fadeIn(300);
            });

        }

    }

    var container = morphObject.container;

    morphObject.startPosition = {
        top: container.css('top'),
        left: container.css('left'),
        width: container.css('width'),
        height: container.css('height'),
        marginLeft: container.css('margin-left')
    };

    morphObject.init();

});

You can see in the fiddle, I have added a new button, container and content. How can I make my code work with multiple buttons?

Thanks.

Answer 1

As i said in my comments, you could do the following. Bear in mind that this is an untested version.

init: function(params) {
    //object reference
    var self = this;
    //reassign the button object if it was passed
    //else use the default from the object
    self.button = typeof params !== "undefined" && params.button || self.button;

    self.button.on('click', function() {
        $(this).fadeOut(200);
        setTimeout(self.containerMove, 200);
    });
}

//I am using an object as you my want to
//pass in more options later, just in case
//such as 
/*
morphObject.init({
    button: $('button.morphButton2'),
    container: $('.another-container')
});
*/

morphObject.init({
    button: $('button.morphButton2')
});

Or you could have a common class to all buttons that would trigger the click inside the init method. Easy enough?

var morphObject = {
    button: $('button.morphButton') //let's say 'morphButton' is the common class
    .....
    .....

    init: function(params) {
        //object reference
        var self = this;        
        self.button.on('click', function() {
            $(this).fadeOut(200);
            setTimeout(self.containerMove, 200);
        });
    }

    .....
    .....
    .....
}