Geek asks and answers

JQuery text animation with smooth flash like animation

I did not find an answer to this for a reasonable amount of time in this forum. So I ask.

I try to animate the text from left to right with the ease of "swing", but at the same time make it fade and then fade to the end.

I found the solution in three stages, but it is very difficult for me to maintain and modify it. Using this technology, it is also impossible to use rocking attenuation.

What am I doing:

  • live left + = 10 and opacity from 0 to 0.8 in the same animation for 1 second.
  • animated left + = 20 for 2 seconds.
  • live left + = 10 and opacity from 0.8 to 0 for 1 second.

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

- , , . . , .:

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

- ?

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

+1

More articles:


All Articles