Question

I’m trying to make a basic navigation, all the links are plain text and the current page is displayed by a different colour.

How would I go about having that different colour ‘slide’ to the current hovered navigation item?

For example: http://www.branded07.com/
Something like that but instead of the background of that link sliding, could I have the text colour slide?

Answer 1

This is a tough one 🙂 As I understand what you’re trying to achieve is when you have a single word, for example the word COLOR, displayed in red, to first have the C to change color, then the O, then the L etc. and in such a rapid and continuous motion it’ll seem like the next color is sliding from left to right. Am i right?

First of all, colors cannot be animated using jQuery core, but you can use the jQuery.color() plugin (check out https://github.com/jquery/jquery-color). Using this plugin a possible approach would be to grab the text you are working on (the hovered menu-item), cut out each letter and animate them one-by-one, using a little timeout to animate it.

I have built you a example at jsfiddle, check it out and customize it for your needs: http://jsfiddle.net/xhCa2/