Jquery - Morphing Button Concept - Problems

So I have created a simple morphing button concept. Everything seems good. Except from the fact that after opening and closing the button about 4-5 times, everything seems to mess

Solution 1:

Each time you call:

Morphing.prototype.close = function() {
    var self = this;
    this.span.on('click', function() {
        self.content.fadeOut();
        self.span.fadeOut();
        self.overlay.fadeOut();
        setTimeout(self.animateBack.bind(self), 275);
    });
};

You define a on click for the span in your newContainer.

Add:

$.fn.once = function(a, b) {
    returnthis.each(function() {
        $(this).off(a).on(a,b);
    });
};

at the end of your code and then:

Morphing.prototype.close = function() {
    var self = this;
    this.span.once('click', function() {
        self.content.fadeOut();
        self.span.fadeOut();
        self.overlay.fadeOut();
        setTimeout(self.animateBack.bind(self), 275);
    });
};

and it should be ok.

Here is an updated Fiddle