Как медленно изменить расстояние между буквами в h1 после нажатия на элемент div, в котором он находится?

Question

У меня есть класс, который я назвал ".social", который я открываю после нажатия на div. Внутри находится инструкция переключения регистра, так что после щелчка, если вы щелкнете по нему еще раз, div снова закроется. Я показываю только одну букву внутри нее, используя атрибуты "переполнение" и межбуквенный интервал, чтобы скрыть остальные буквы. После нажатия на элемент div я хочу расширить элемент div и уменьшить расстояние между буквами, чтобы отображалось все слово.

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

Самый простой способ - переместить letter-spacing стиль к .social разделите и оживите его, используя тот же animate вызов функции как для width,

JSFiddle Demo

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

Answer 2

Вам необходимо установить допустимый интервал между буквами:

$('.social h1').css({'letter-spacing': 'normal'}, 1000);

Есть ли что-то еще, с чем у вас были проблемы? Это единственный вопрос, который я могу почерпнуть из вашего поста.

РЕДАКТИРОВАТЬ:

$('.social h1').animate({'letter-spacing': 'normal'}, 1000);

Answer 3

Если вы пытаетесь анимировать межбуквенный интервал, это работает с jQuery 1.8.1+

$('.social h1').animate({'letter-spacing': '0px'}, 5000)