Как анимировать изменение содержания?
Если длинныйдлинныйзаголовок1 умещается в одну строку, то будет красиво реализовать этот эффект на чистом CSS
Решение оказалось простым)
Если кто-нить подскажет как его сократить - буду рад)<span class="vir">LongLongTitle1</span>$('.vir').each(function () {
        var txt = $(this).text(),
            short;

        if (txt.length > 5) {
            var start = txt.substr(0, 2),
                end = txt.substr(-2, 2);

            short = start + '...' + end;
            $(this)
                .addClass('shorted')
                .attr('data-full-text', txt)
                .attr('data-short-text', short)
                .text(short);
        }
    });
    $('.vir')
        .mouseover(function () {
            var self    = $(this),
                words   = $(this).data('fullText'),
                len     = words.length,
                wdth    = len * 10,
                c       = 0;

            $(this).animate({ 'width': wdth }, 200).text($(this).data('fullText'));
        })
        .mouseleave(function () {
            var self    = $(this),
                words   = $(this).data('shortText'),
                len     = words.length,
                wdth    = len * 10,
                c       = 0;

            $(this).animate({ 'width': wdth }, 100).text($(this).data('shortText'));
        });