updateStatus

animate a status update

by jorgeluis

HTML

<button class="trigger" type="button">update</button>

<div id="status">Preparing everything...</div>

CSS

#status {
    position: relative;
    font: bold 30px sans-serif;
    margin-top: 100px;
    text-align: center;
}

JavaScript

function updateStatus(msg) {
	var el = $('#status');

	el.animate({
		opacity: 0,
		top: '-=25'
	}, 200, function() {
		el.text(msg);
        el.animate({
            top: '+=60'
        }, 0, function() {
            el.animate({
                opacity: 1,
                top: '-=35'
            })
        })
	});
}

$('.trigger').on('click', function() {
    updateStatus('almost there...');
});