jQuery Circle Animation

http://stackoverflow.com/q/16528488/1454806

HTML

<div class="circle">
    <div>RED Contents go here!</div>
</div>
<div class="circle">
    <div>GREEN Contents go here!</div>
</div>
<div class="circle">
    <div>BLUE Contents go here!</div>
</div>

CSS

.circle {
    display: inline-block;
    position: absolute; left: 50%; top: 50%;
    height: 50px; width: 50px;
    margin: -25px 0 0 -25px;
    cursor: pointer;
    border-radius: 25px;
    z-index: 0;
}
.circle:nth-child(1) { background: red; margin-left: -80px; }
.circle:nth-child(2) { background: green; }
.circle:nth-child(3) { background: blue; margin-left: 30px; }
.circle > div { display: none; }
.circle.expanded > div { display: block; }

JavaScript

$('.circle').on('click', function() {
    var $this = $(this);
    $this.css('z-index', 2)
    .siblings('.circle').removeClass('expanded').css('z-index', 1);
    $this.animate({
        left: 0, top: 0, margin: 0, 
        width: '100%', height: '100%',
        'border-radius': 0, padding: '60px 5px 5px 5px'
    }, 100).addClass('expanded');
    $this.siblings('.circle').animate({
        left: 0, top: 0, height: 50, width: 50,
        'border-radius': 25, padding: '0'
    },50).first().css({ 'margin': '5px' })
      .next().css({ 'margin': '5px 5px 5px 55px' });
    $this.css('z-index', 0);
});