CODEWITHSUNDEEP
jquerycsssprite
omnix
omnix

Reputation: 1899

Using jQuery and sprites

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; }

Upvotes: 1

Views: 537

Answers (2)

Yi Jiang
Yi Jiang

Reputation: 50165

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.

Upvotes: 1

nathan
nathan

Reputation: 5731

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

Upvotes: 0

Related Questions