Grow your CSS skills. Land your dream job.

Need help with Jquery sprite animation

  • # June 16, 2013 at 7:18 am

    Hey guys. I’m trying to implement some jquery fade animations for my sprite based navigation following Chris’ help guide [here](http://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

    # June 16, 2013 at 8:29 am

    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

    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

    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

    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

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

    # June 16, 2013 at 9:28 am

    Remove the jQuery part.

    # June 16, 2013 at 9:45 am

    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

    # June 16, 2013 at 10:03 am

    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

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

    # June 16, 2013 at 10:27 am

    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

    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

    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

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".