javascript - Move text while one word is being animated -

i'm working on animating text element.

the element changes 1 work animation. in example. http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

the thing don't when change 1 word, other words around shift abruptly. i'm trying use effect other words move around shift in nice way. in example.

http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

does know how this? or link me relevant solution?

i'm using html, css, , js

there may other ways of doing consistent cross browser way of doing can think of this. guidance code samples helpful.

you'll need have animated word wrapped in span. you'll want define width of outer span width of inner span before animation. can css if know width or can dynamically this:

$(outerselector).width( $(innerselector).width() + 'px'); 

animate text animate width change:

$(outerselector).animate({width: $(innerselector).width() +'px'}, 500); 

this works making smaller. can use method making word bigger need know final width of word first. have 1 span , this:

$(selector).animate({width:newwidth}, 500); 

if you're not worried cross browser compatibility or if can assume using site have css 3 enabled browser can css:

selector {     transition: width 0.5s; } 

then shrinking text need again set outer span width above, after animation of text this:

$(outerselector).width( $(innerselector).width() + 'px'); 

this has same problem needing know width in advance transitioning longer text. find out width using span identical text.

.copy {     position: absolute;     left: -100%; } 

then width of copied version , use new width animation.