javascript - jQuery - Morphing button concept - Problems

Question

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 up and get muddled.

Here is the Fiddle: https://jsfiddle.net/f793yvh5/22/

Here's part of the jQuery:

function Morphing( button, container, content) {
    this.button = button;
    this.container = container;
    this.content = content;
    this.overlay = $('div.overlay');
    this.span = $('span.close');

    var self = this; // so you have a reference to this this.

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

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

}

Morphing.prototype.startMorph = function() {
    var self = this;
    this.button.on('click', function() {
        $(this).fadeOut(200);
        // Work on from here!
        setTimeout(self.containerMove.bind(self), 200);
    });
};

Morphing.prototype.containerMove = function() {
    var self = this;
    this.overlay.fadeIn();
    this.container.addClass('active');

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

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);
    });
};

Morphing.prototype.animateBack = function() {
    var self = this;
    this.container.animate(this.positions.startPosition, 400, function() {
        self.button.fadeIn(300);
        self.container.removeClass('active');
    });
};

The other part:

$(document).ready(function() {

    var morph = new Morphing( $('button.morphButton'), $('div.morphContainer'), $('h1.content, p.content') );


    morph.startMorph();

});

To sum up, this is what jQuery is doing:

Button is clicked: 1. Button fades out, 2. Container behind the button is therefore visible, 3. Overlay fades in, 4. Container animates to center of screen, 5. Content in container fades in.

When the 'X' is pressed: 1. Content fades out, 2. Overlay fades out, 3. Container animates back to button, 4. Button fades in over the container.

Thanks.

Answer 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) {
    return this.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