First of all, props to the jQuery team for updating the framework, documentation, and forum. It's even more amazing now! :)
I'm fairly new to jQuery so I figured you guys might be able to help with a beginners level problem.
I'm sure this isn't a bug in jQuery. It's most likely an error on my part.
I'm building a nav with some jQuery effects. I got the hover to work like i want it, as well as the custom animation. However, there are two small bugs that I cant get ride of.
First bug is when you hover over portfolio (the current list item) my animation glitches some times and plays the call back even though I didn't hover off. I'm guessing when the <a> element is hovered, the parent <li> element forgets that it's still hovered?
Second bug is in IE (both IE8 & IE7) the first time you hover over a <li> it plays the animation .hover(onOut, onOver). Then it snaps back to .hover(onOver, onOut); like it should be. Here I'm guessing IE just wants to be special?
I uploaded the files
here . Any feedback from you guys would be great. Also if you have any tips on better improving the code let me know. Thanks.
I might take that file down one day so here's the jQuery snippet to go along with my original problem:
- $('#main-nav > li').hover(onOver, onOut);
- function onOver() {
- $(this).animate({backgroundPosition: '-1px 0' } ,400);
- $(this).find('a').animate({color: '#2D2D2D'} ,400 );
- };
- function onOut() {
- $(this).animate({ backgroundPosition: '-144px 0'}, 200, function() {
- $('.current').css("background-position", "-142px 0")
- });
- $(this).find('a').animate({color: '#FFF'} ,200 );
- };
Also...heh
I'm big into learning how to help myself. So is there a way with firebug to find these bugs? If so, what what be the debugging workflow?