jQuery Animation Playground

Playing with jQuery Animation/Promise

by Troy Alford

HTML

<div class="block"></div>

CSS

.block {
    background: #268;
    display: inline-block;
    position: absolute; left: 50%; top: 50%;
    height: 50px; width: 50px;
    margin: -25px 0 0 -25px;
    cursor: pointer;
}

JavaScript

var block = $('.block');
$.chain = function() {
    var promise = $.Deferred().resolve().promise();
    $.each(arguments, function() {
        promise = promise.pipe(this);
    });
    return promise;
};
var go = function() {
    $.chain(function() {
        return block.animate({ 
            left: 0, top: 0, margin: 0, width: '100%', height: '100%', opacity: 0.2,
            background: '#000'
        }, 1000);
    }, function() {
        return block.animate({
            'border-radius': (block.width() / 2) + 'px',
            background: '#268'
        }, 1000);
    }, function() {
        return block.animate({
            'border-radius': 0,
            left: '50%', top: '50%', width: 50, height: 50,
            margin: '-25px 0 0 -25px', opacity: 1.0
        }, 1000);
    });
};
block.on('click', go);