Need help with Jquery sprite animation

[sammitchell]

Hey guys. I’m trying to implement some jquery fade animations for my sprite based navigation following Chris’ help guide [here](https://css-tricks.com/fade-image-within-sprite/) using method #1 and I’m almost there but it looks a little off to me in Chrome:

**EDIT: I’ve switched to the CSS variant (method 1) and the same problem occurs.

http://www.samuelmitchelldesigns.com

I’m trying to get it working on the Home button. When I mouseover the span area goes white before fading away. The fade out motion seems fine. Sorry if this is super obvious but any advice would be great!

Cheers

[CrocoDillon]

Try removing this script: http://samuelmitchelldesigns.com/wp-content/themes/twentyeleven-child/js/nav-script.js?ver=3.5.1

[sammitchell]

Hey Dillon thanks for the suggestion.

I actually need that script for the animation. It seems to be working albeit with a big ugly white square on mouseover. I know I’ve messed something up I just don’t know if its in the script, the style or what.

[CrocoDillon]

Dude, I’m lost on this one. If I change the opacity on the span using the devtools it works, but if jQuery changes the opacity using the fade animations there is this white thing.

[sammitchell]

Yeah its like the hover sprite is fading in over a white background. Thanks for checking it out man.

[CrocoDillon]

Yeah, but the white background is coming from nowhere (tried setting the white backgrounds to something else, the fadeIn still started as white) Try with CSS transition on opacity instead of jQuery?

[sammitchell]

I’ve switched to CSS transition and it still looks kinda weird :S

[CrocoDillon]

Remove the jQuery part.

[sammitchell]

JQuery is gone and the white box is still sticking around. Back to the drawing board.

I guess that rules out the script as the problem though.

The fade out looks great anyway

[CrocoDillon]

I’really puzzled… hope some one else tags along.

It’s not a bug, else it wouldn’t be in Chrome, Firefox and Opera (and maybe Internet Explorer if you add the unprefixed transition property).

Try to create a simplified nav in CodePen, just the most essential HTML and CSS to make it work, see if that works.

[pixelgrid]

if you remove the transition declaration i think the white span fade dissappears
remove it from #menu-item-19 a span

[sammitchell]

Thanks for the reply. I actually want to fade part though, so I’d rather not have to remove the transition. I just need to get rid of the white part.

[CrocoDillon]

You should check out demo 5 ( [link](http://css3.bradshawenterprises.com/cfimg/) ), and try that instead… except browser support might be bad (though they have demos with transition on opacity too and they seems to work).

[sammitchell]

Hey man I think I just stumbled upon the solution. There were some hover classes in the styles.css of the parent theme. Once removed the box went away. Thanks for all your help and suggestions dude!

[CrocoDillon]

Really? Can’t believe I missed that… ah well glad you solved it! :)

[Author]

Posts