jQuery smooth color change effect.

[Andrew Yurlov]

How can I achieve this. I surfed the net to find something helpful but so far have nothing. I am trying to change the background color of my navigation onhover. I don't want to do this with css because I want the effect to smoothly change the color to a different one. Does anyone have some tutorials I can read. If you do please post links to tutorials.

Thanks.

[Ronald Roe]

You could do something like so:

$('li').hover(function(){
$(this).animate({"color": "#123456"}, "slow");
});

Just change the li to target your specific code, and change the color to what you want.

[MHometchko]

You may not want to use CSS3 but you can achieve a very "smooth" rollover color change with it using transitions.

[George Dolidze]

You could do something like so:

$('li').hover(function(){
$(this).animate({"color": "#123456"}, "slow");
});

Just change the li to target your specific code, and change the color to what you want.

And add this if you want to change it back once the mouse moves off:
$('li').hover(function(){
$(this).animate({"color": "#123456"}, "slow");
}, function(){$(this).animate('color' : '#654321', 'medium');
});
The colors in green should be changed to the colors of your choice.
Correct me if I'm wrong, I'm a bit sucky without all the things Aptana does for me

[Andrew Yurlov]

And add this if you want to change it back once the mouse moves off:
$('li').hover(function(){
$(this).animate({"color": "#123456"}, "slow");
}, function(){$(this).animate('color' : '#654321', 'medium');
});
The colors in green should be changed to the colors of your choice.
Correct me if I'm wrong, I'm a bit sucky without all the things Aptana does for me

Aptana is an amazing tool. I use it too.

[Andrew Yurlov]

And add this if you want to change it back once the mouse moves off:
$('li').hover(function(){
$(this).animate({"color": "#123456"}, "slow");
}, function(){$(this).animate('color' : '#654321', 'medium');
});
The colors in green should be changed to the colors of your choice.
Correct me if I'm wrong, I'm a bit sucky without all the things Aptana does for me

Sorry i'm a bit rusty. Do I put this jQuery at the top of page before body tags?

[Ronald Roe]

Sorry i'm a bit rusty. Do I put this jQuery at the top of page before body tags?

I would put it in a separate file and link it with the script tag, myself. Whether you put it in the head or at the end of the body is up to you. If you put it in the head, it'll have to load before the rest of the page. If you put it at the end of the body, the page will load before the script does.

[Andrew Yurlov]

So linking it externally is the best way right?

[Ronald Roe]

I think so. It's a separation of concerns kinda thing.

[George Dolidze]

I would put it in a separate file and link it with the script tag, myself. Whether you put it in the head or at the end of the body is up to you. If you put it in the head, it'll have to load before the rest of the page. If you put it at the end of the body, the page will load before the script does.

The implied 'document.ready' makes it always kick in after the page loads, no matter where you put it. But an external file is best.