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.
See Question&Answers more detail:
os