- This topic is empty.
June 16, 2013 at 7:18 am #45569
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.
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!
CheersJune 16, 2013 at 8:05 am #138917
Try removing this script: http://samuelmitchelldesigns.com/wp-content/themes/twentyeleven-child/js/nav-script.js?ver=3.5.1June 16, 2013 at 8:29 am #138921
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.June 16, 2013 at 8:44 am #138922
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.June 16, 2013 at 8:46 am #138923
Yeah its like the hover sprite is fading in over a white background. Thanks for checking it out man.June 16, 2013 at 8:54 am #138924
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?June 16, 2013 at 9:02 am #138926
I’ve switched to CSS transition and it still looks kinda weird :SJune 16, 2013 at 9:28 am #138928
Remove the jQuery part.June 16, 2013 at 9:45 am #138929
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 anywayJune 16, 2013 at 10:03 am #138931
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.June 16, 2013 at 10:16 am #138933pixelgridParticipant
if you remove the transition declaration i think the white span fade dissappears
remove it from #menu-item-19 a spanJune 16, 2013 at 10:27 am #138934
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.June 16, 2013 at 12:22 pm #138942
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).June 16, 2013 at 1:30 pm #138945
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!June 16, 2013 at 1:47 pm #138946
Really? Can’t believe I missed that… ah well glad you solved it! :)
- The forum ‘CSS’ is closed to new topics and replies.