jQuery text animation explosion effect on hover

Question

Trying to replicate this awesome "Mouse over Escape" effect from the link below using simple jQuery: http://codecanyon.net/item/jquery-text-animation/full_screen_preview/233445

Any pointers or tips? See "Mouse over Escape" section in link above.

Answer 1

The logic:

1. Wrap each textual character inside a <span> tag

2. Make the new span tags relatively positioned to manipulate their location without affecting layout flow.

3. Apply randomized CSS style to each span separately (for dynamic movement) on hover

4. Remove the style after a delay

The position change is animated using the CSS transition property.