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

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

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

Answer 2

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

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

Demo here