JS - Simple Callback Example

HTML

<div>
	test
</div>

CSS

div {
	background: #47d;
	height: 200px;
	width: 200px;
}

JavaScript

var div = $('div');

var moveRight = function(callback) {
	// This function just moves the div right and calls 'callback' when it's done.
	div.animate({marginLeft: '200px'}, callback);
};

var moveDown = function(callback) {
	// This function knows that the div must be moved right before moving the div down.
	moveRight(function() {
		div.animate({marginTop: '200px'}, callback);
	});
};

var animate = function() {
	// All this function needs to know is that the div must be moved down before turning it green.
	moveDown(function() {
		div.css('background', '#7d0');
	});
};



animate();