Live JavaScript translation blinks

Question

I have made a JavaScript translation of some text that occurs live rather than on server side, but it blinks when it replaces and thus is not user friendly. Is there anything I could do about it? I made

this jsfiddle

and here is the summary of the code:

// bind the animation so I can catch a node inserted and then

if(event.animationName == "nodeInserted")
{
    if ($(event.target).hasClass('translate'))
    {
        $(event.target).text(Translate($(event.target).attr('translate')));
    }
}

// where function Translate() replaces the text

However it blinks when it replaces and I am out of ideas how this can be more eye friendly. I hope the example is simplistic enough to picture my problem.

Answer 1

Based on your fiddle, I can give few remarks. First, your animation is way to short (0.001s) which probably could be a reason why it blinks (animation happens too fast).

Also, your fade starts at 50%, instead of 0%.

Maybe I am wrong about all this, and I did not understand your question, but I have provided and edited fiddle so you can see for yourself what am I referring to. It is nice fading in this way:

http://jsfiddle.net/TMGLX/9/