How to slowly change the letter spacing of an h1 once the div it's in is clicked?

Question

I have a class I named '.social' that I have open up once the div is clicked. Inside is a switch case statement so that once it is clicked, if you click it again, the div closes back up. I am only showing one letter within it, using the 'overflow' and letter spacing attributes to hide the rest of the letters. Once the div is clicked, I want to expand the div, and decrease the letter spacing together, so that all of the word is displayed.

jQuery:

$(document).ready(function () {
var SocialClick = true;

$('.social').mousedown(function () {
    switch (SocialClick) {
        case true:
            $('.social h1').css({'letter-spacing': 'none'}, 1000);
            $(this).stop().animate({ width: '150px' }, 500);
            SocialClick = false;
            break;
        case false:
            $(this).stop().animate({ width: '50px' }, 500);
            SocialClick = true;
            break;
        }
    });
});

CSS:

.social {
    overflow: hidden;
    z-index: 50;
    display: block;
    float: right;
    margin-top: -52px;
    margin-right: 50px;
    width: 50px;
    height: 50px;
    background: #fff;
}

.social h1 {
    margin: 0;
    padding: 0;
    font-family: Calibri;
    font-size: 40px;
    color: #000;
    letter-spacing: 50px;
}

Answer 1

The simplest way is to move the letter-spacing style to the .social div and animate it there, using the same animate function call as for the width.

JSFiddle Demo

.social {
    letter-spacing: 50px;
    ...
}
...
$(this).stop().animate({ width: '150px', letterSpacing: '0px' }, 500);
...
$(this).stop().animate({ width: '50px', letterSpacing: '50px' }, 500);