Javascript advanced mouseover

Question

Would it be possible to have the colour of text in an element to be inverted of the background?
eg:

So the first image is the normal state. the second is during the mouseover, and the last is the finished mouseover.
Edit: i want the background to slide out, and the colour of each character to change as the black block "slides" behind it.

Answer 1

You can do this with CSS transitions. Here's an example (tested in Opera and Chrome). Of course there are several drawbacks in such approach:

1. Browser must support CSS transitions.
2. It's not the real invert, you have to set colors manually.
3. Extra markup.

Though, second and third one could be done with JavaScript (calculate inverted colors and replace innerHTML).

Edit: As egarcia said in his answer, you can animate width property with custom function or jQuery, so the first drawback could be neglected.