patternjavascriptMinor
Simple morphing button concept
Viewed 0 times
morphingconceptsimplebutton
Problem
I have been making a jQuery morphing button type thing.
jsFiddle
Basically, I would love to have any feedback on what
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;
$('X').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
Solution
Looks pretty clean for me.
the only improvement i suggest, is avoid the
Also, for my suggestion is a little anoying using a literal object
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.Code Snippets
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);
}Context
StackExchange Code Review Q#84618, answer score: 2
Revisions (0)
No revisions yet.