Jquery Анимация текста с плавной анимацией

Question

Я не нашел ответа на этот вопрос за разумное время на этом форуме.Поэтому здесь я спрашиваю.

Я пытаюсь анимировать текст слева направо с помощью легкого «свинга», но в то же время заставляю его появляться, а затем исчезать до конца.

Я нашел решение в три этапа, но мне очень трудно его поддерживать и модифицировать.С помощью этой техники также невозможно использовать замедление свинга.

То, что я делаю:

1. анимация влево + = 10 и непрозрачность от 0 до 0,8 в той же анимации для 1сек.
2. анимация влево + = 20 в течение 2 секунд
3. анимация влево + = 10 и непрозрачность в диапазоне от 0,8 до 0 в течение 1 сек.

В коде:

$("#teaserText").show().animate({opacity:0.8, left:'+=20'}, 1000, 'linear')
$("#teaserText").animate({left:'+=40'}, 2000, 'linear')
$("#teaserText").animate({opacity:0, left:'+=20'}, 1000, 'linear');

Я попробовал что-то еще, но это не помогло.движение вправо останавливается до исчезновения.Я хочу продолжать движение, пока оно затухает.:

$("#teaserText").show().animate({opacity:0.8},{queue: false, duration: 1000})
$("#teaserText").animate({left:parseInt($("#teaserText").css("left"))+50}, {duration: 3000}, 'swing')
$("#teaserText").animate({opacity:0},{duration: 1000});

У кого-нибудь есть лучшее решение?

Answer 1

Логика вашей анимации может быть заключена в простую функцию

function swing_w_fading(selector, animation_options, duration, fade_duration)
{
    if(typeof duration == "undefined")
        duration = 3000;

    if(typeof fade_duration == "undefined")
        fade_duration = 600;

    $(selector).show().animate({opacity:0.8}, {
        queue: false,
        duration: fade_duration
    });
    $(selector).animate(animation_options, duration, 'swing')
    setTimeout(function() {
        $(selector).animate({opacity:0}, {
            queue: false,
            duration: fade_duration
        });
    }, duration - fade_duration);
}

Демо здесь

Answer 2

Вы видели следующий плагин?http://farukat.es/journal/2011/02/514-new-creation-jquery-runloop-plugin

демо: http://files.farukat.es/creations/runloop/