Javascript or jQuery text colour slide effect?

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/

Answer 2

You have to use jQuery UI (extension to toggleClass function):

Html:

<div class="menu">
<span class="menu-item">Menu 1</span>
<span class="menu-item">Menu 2</span>
<span class="menu-item">Menu 3</span>
<span class="menu-item">Menu 4</span>
</div>

Css:

.menu-item
{
    color: black;
}

.menu-item-hover
{
    color: red;
}

Javascript:

$(".menu-item").each(function() {
    $(this).hover(function() {
        $(this).toggleClass('menu-item-hover', 500);
    });
});

Demo: http://jsfiddle.net/nQ6Ze/

Answer 3

From what you have described I think you mean something like this? http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Or at least it might be a starting point