[SOLVED]Why does this animation only work in Chrome?
Here is a link to a very simple page, with one simple navigation menu:
http://www.mygamehandle.com/quality/
If you view the page in Chrome, you will notice a simple mouse-hover animation. This animation does not work in Firefox 3.5 or IE 8.
The function to animate the navigation is in the external.js file, and looks like this:
-
$(function(){
$('.nav_bar').hover(
function(){
$(this).children().stop().animate({'padding-right':10}, 300, 'easeOutSine');
},
function(){
$(this).children().stop().animate({'padding-right':0}, 300, 'easeInSine');
}
);
});
You may notice that I'm animating an H4 tag inside the containing div by using children().
You may also notice that I'm using a plugin called cufon that re-draws the H4 text as a canvas tag. If I remove all of the cufon code, and use just simple H4 tags without canvas tags, the problem still exists.
I'm also using an easing/effects plugin, and I've tested it to no avail without this plugin as well.