Question

I have a demo up here so you can look at all the html and javascript involved.

Problem:

The problem I’m having is that at the moment, when you hover over a link (other than home) and then move the mouse anywhere else on the screen (except over the home link) the home link isn’t reverting to the white text color.

I tried to resolve the problem by changing the following piece of code (look in the “example.js” file linked to from the page to view full code):

if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
}

I added an extra line

if (status == "off")
{
$(this).stop().animate({ color: linkcol },500);
$(".current_page_item_two a").stop().animate({ color: whitecol },500);
}

This line was intended to set the link inside the current_page_item_two element back to white when no link is hovered over (when the slider returns to the home link).

However, looking at the demo here, you can see that this creates some horrible glitches in the nav (wiggle the mouse about over the links to see what I mean, I end up causing some issue where the white rollover animations don’t work at all)

Also, as a side note, why are my callback functions when animating the hover rectangle being called before the animation is complete? I’m new to jquery and I was under the impression that the fourth parameter was a function to be called when the animation was complete.

Thanks!

Answer 1

Your code is needlessly complex. I refactored what you want to do into a very simple jQuery plugin. If you want I encourage you to look into css3 animations to make it even smaller (although you might want to maintain cross browser compat). The code is still a little more complex than it needs to be, although that is more due to me not having much time at the moment. You can see the solution here:

http://jsfiddle.net/hGm7M/3/

Edit: updated url to add resetting slider to home and changing slider width

If you have any questions feel free to ask.

Notes:

• You could move all the css into the jQuery plugin making it a self contained widget
• You could separate the slider from the color system, although in this case I am not sure if it’s worth it
• Right now I don’t set the colours in css for simplicity which means browsers without javascript will just get default coloured links. There are a number of solutions to this, but it depends on what you want to do. I tend to prefer the widget style of things, so I would serve a html menu to the client and then replace it with a js widget with all its own styling et all. This way you have graceful degradation, but the code is still simple and strait-forward.