Using jQuery and sprites

Question

I am looking for a way to animate my sprites with jquery. When I hover over the image, it fades in. then when I hover off. it fades out.

CSS:

nav ul { position: relative; z-index: 1000;  margin: -26px 0 0 11px; overflow: hidden; }
nav ul li { display: inline; }
nav ul li a { background: url(../images/nav-sprite.png); display: block; float: left; text-indent: -999px; margin: 0 auto; width: 667px; }
nav ul a#nav-1 { background-position: 0 0;  height: 48px; width: 103px; }
nav ul a#nav-2 { background-position: -103px 0;  height: 48px; width: 129px; }
nav ul a#nav-3 { background-position: -234px 0;  height: 48px; width: 156px; }
nav ul a#nav-4 { background-position: -392px 0;  height: 48px; width: 147px; }
nav ul a#nav-5 { background-position: -541px 0;  height: 48px; width: 124px; }
nav ul a#nav-1:hover { background-position: 0 48px; }
nav ul a#nav-2:hover { background-position: -103px 48px; }
nav ul a#nav-3:hover { background-position: -234px 48px; }
nav ul a#nav-4:hover { background-position: -392px 48px; }
nav ul a#nav-5:hover { background-position: -541px 48px; }

Not directly related, but here's a fun jQuery sprites implementation ==> http://stackoverflow.com/questions/3851896/rotate-sprite-javascript/3852360#3852360 — Peter Ajtai, Oct 10 '10 at 03:09

Yi Jiang · Accepted Answer · 2010-10-10T03:03:26.467

There's nothing specific to sprites in this question. You can always use the usual method, combining the hover event with the fadeTo function to get the opacity animation you need.

$("nav ul a").hover(function(){
    $(this).stop().fadeTo(300, 1);
}, function(){
    $(this).stop().fadeTo(300, 0.4);
}).fadeTo(0, 0.4);

If you need to, you can also add a CSS fallback:

nav ul a {
    opacity: 0.4;
}

nav ul a:hover {
    opacity: 1;
}

See it working live here: http://www.jsfiddle.net/yijiang/CNC6W/

Well, it's simple to fix - try adding a background to the ul element, then giving it a border-radius to make sure the rounded corners stay.

nav ul {
    background: #000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /* Not sure about the actual radius 
                             you're using - these are guesses */
}

You might also want to increase the starting opacity from 0.4 to something higher, and the duration to something lower than 300.

Really nice! But the whole nav is now transparent, I only need the hover effect doing it. heres the site im working on atm. http://elektrikhost.com/ — omnix, Oct 10 '10 at 02:56
@Kawohi And so? What difference does that make? And more importantly, have you tried it yet? — Yi Jiang, Oct 10 '10 at 03:16

score 0 · Answer 2 · answered Oct 10 '10 at 02:51

0

Check out this screen cast from CSS Tricks. It deals with animating CSS sprites.

answered Oct 10 '10 at 02:51

nathan

5,513
4
35
47

Yes but the animation is nothing to do with the sprites. – omnix Oct 10 '10 at 02:58

Using jQuery and sprites

2 Answers2