Использование jQuery и sprites

Question

Я ищу способ анимации моих спрайтов с помощью jquery. Когда я нависаю над изображением, он исчезает, а затем, когда я нахожусь. он исчезает.

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

Answer 1

Там нет ничего конкретного для спрайтов в этом вопросе. Вы всегда можете использовать обычный метод, комбинируя событие hover с функцией fadeTo, чтобы получить нужную вам анимацию непрозрачности.

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

Если вам нужно, вы также можете добавить CSS запасной вариант:

nav ul a { 
    opacity: 0.4; 
} 

nav ul a:hover { 
    opacity: 1; 
} 

Посмотреть это работает жить здесь: http://www.jsfiddle.net/yijiang/CNC6W/

---

Ну, это легко исправить - попробуйте добавить фон к элементу ul, затем давая ему border-radius, чтобы убедиться, что закругленные углы остаются.

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 */ 
} 

Вы также можете увеличить начальную непрозрачность от 0,4 до чего-то более высокого, а продолжительности на что-то ниже, чем 300.

Answer 2

ЗАКАНЧИВАТЬ гипс this экрана от CSS хитрости. Он посвящен анимации CSS-спрайтов.