Jquery Animate text with smooth flash like animation

Question

I haven't found any answer to this in a reasonable amount of time on this forum. So here I ask.

I'm trying to animate a text from left to right with the ease 'swing', but at the same time, make it fade in, then fade out before the end.

I found a solution in three steps but I find it very hard to maintain and modify. With this technique it is also impossible to use the swing easing.

What I do is:

1. animate left +=10 and opacity from 0 to 0.8 in the same animation for 1 sec.
2. animate left +=20 for 2 sec.
3. animate left +=10 and opacity from 0.8 to 0 for 1 sec.

In code:

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

I tried something else, but it didn't do what I wanted. the movement to the right stop before the fade out. I want to the keep moving while it is fading out.:

$("#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});

Does anyone have a better solution?

Answer 1

Logic of your animation can be wrapped in simple function

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