CSS/JS: Animate Inline Element Upon Text Change

Question

When an inline element\'s text changes, it is usually the case that its computed width or height changes as well.

Usually it\'

Answer 1

You could try a little bit of jQuery animation:

function changeText(el) {
    el.animate(
    {
        opacity: 0
    }, 
    {
        duration: 'slow', 
        complete: function () {
            $(this).text('New Text');
            $(this).animate({opacity: 1}, 'slow');
        }
    });  
}

Here is a fiddle.