在激活一个单词时移动文本

Question

I'm working on an animating text element.

The element changes one work with animation. Much like in this example. http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

The thing is I don't like that when I change one word, the other words around it shift abruptly. I'm trying to use an effect where the other words that move around shift in a nice way. Like in this example.

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

Does anyone know how to do this? or link me to a relevant solution?

I'm using HTML, CSS, and JS

Answer 1

There may be other ways of doing it but the most consistent cross browser way of doing it that I can think of is this. This is some guidance but code samples would be helpful.

You'll need to have the animated word wrapped in an extra span . Then you'll want to define the width of the outer span to be the width of the inner span before animation. You can do this with CSS if you know what the width will be or you can do it dynamically like this:

$(outerSelector).width( $(innerSelector).width() + 'px');

Animate the text then animate the width change:

$(outerSelector).animate({width: $(innerSelector).width() +'px'}, 500);

This really only works for making it smaller. You can use this method for making the word bigger but you need to know the final width of the word first. Then you could simply have one span and do this:

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

If you're not worried about cross browser compatibility or if you can assume that everyone using the site will have a CSS 3 enabled browser then you can do it with CSS:

selector {
    transition: width 0.5s;
}

Then you for shrinking text you would need to again set the outer span width like above, but after the animation of the text you could simply do this:

$(outerSelector).width( $(innerSelector).width() + 'px');

This has the same problem with needing to know that width in advance for transitioning to longer text. You could find out the width using another span with identical text.

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

Then you could get the width of the copied version and use that as the new width for animation.