Question

This script allows a word to be replaced with another while animating the letters both in and out. It starts off with “First Wordy” and on mouseover changes to “Second Wordy”, and on mouseout changes back to the first word.

Two things that I lack.
The first is a big bug & it’s a priority as it has to get fixed. Sometime at first, the blue “W’ & It’s shadow is clipped, after you run it initially and rollover, the green “W” & it’s shadow is clipped, when rollout, the blue “W” is clipped. Not sure if solution is css or js, but I can’t seem to find the right solution.

The second is really two small cosmetic things. 1st small thing – As letters come in, you can see a flickering while I assume css/js gets applied. Any way to minimize the flicker or eliminate if possible?
2nd small thing – when script first runs, the letters just appear abruptly, one after the other. Is there a way to get a nice fadeIn to work on each letter? – I couldn’t find the right place to apply it.

Here is the jsFiddle: http://jsfiddle.net/billparti/8XFSx/

Answer 1

I’m not sure this is the issue but the animations that jquery does adds overflow hidden to the element. It’s kinda a pain, you can test this by adding an !important css attribute to get around that. It’s annoying…