Animated Category Bubble (Chrome Fix)

Prototype for the animated category bubble for use on www.TravisMaynard.com

by Travis

HTML

<a href="#" class="cat">
    <span>Web Development</span>
    <img src="http://i.imgur.com/2r6YC.png" alt="Money" />
</a>
<a href="#" class="cat">
    <span>Money</span>
    <img src="http://i.imgur.com/2r6YC.png" alt="Money" />
</a>
<a href="#" class="cat">
    <span>Gaming</span>
    <img src="http://i.imgur.com/2r6YC.png" alt="Money" />
</a>

CSS

body {font: normal 14px sans-serif;padding:10px;}
.cat {height:32px; margin:10px; background:red; border-radius:16px; position:relative; display:block; float:right; overflow:hidden;}
.cat img {position:relative; display:block; float:right;}
.cat span {color:#fff; padding:8px 5px 8px 10px; position:relative; display:block; float:left;}

JavaScript

$(function(){
    // Variablize
    var icon = $('.cat img');
    var text = $('.cat span');
    //var measurement;
    
    // Measure & Hide
    text.each(function (){
        var measurement = $(this).width() + 10;
        $(this).css({
            marginRight: '-' + measurement + 'px',
            opacity: '0'
        });
    });
    
    // Re-measure & Animate!!
    icon.hover(function(){ 
        var measurement = $(this).parent().find('span').width() + 10;
        $(this).siblings('span').stop().animate({
            marginRight: '0px',
            opacity: '1'
        }, 500);
    }, function(){
        $(this).siblings('span').stop().animate({
            marginRight: '-' + measurement + 'px',
            opacity: '0'
        }, 500);
    });
});