Как анимировать изменение содержания?

Question

[Николай]

Здравствуйте! Имеем, скажем, такой код (jsfiddle):

<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 () { $(this).text($(this).data('fullText')); })
      .mouseleave(function () { $(this).text($(this).data('shortText')); });

Подскажите пожалуйста, как добавить какую-нибудь плавную анимацию?

Answer 1

[Николай]

Решение оказалось простым)
Если кто-нить подскажет как его сократить - буду рад)

<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'));
        });

Answer 2

[Ivan Bogachev]

Если длинныйдлинныйзаголовок1 умещается в одну строку, то будет красиво реализовать этот эффект на чистом CSS

Comments

[Николай]

Хороший вариант, но необходимо что бы захватывал первые две и последние две буквы (

Answer 3

[Сергей Грибок]

Смотрите в jQuery Effects
Какая нибудь анимация
А особенно Fade
и Animate

Comments

[Николай]

Смотрите в код)
У меня нет появления или исчезания. У меня меняется контент (текст в слое). Стандартной jQuery анимацией здесь не справишься, если я всё правильно понимаю.

Answer 4

[Mikhail Osher]

stackoverflow.com/questions/20695877/how-to-fade-a...

Comments

[Николай]

Спасибо! А попроще случайно нет решения?)