Как добавить эффект затухания с помощью jQuery в спрайте

Question

У меня есть навигация, созданная с помощью спрайтов. Это почти идеально, за исключением того, что клиент хочет навести курсор и навешивает на него эффект. Я использовал: зависание для этого, но он также хотел бы иметь эффект fadein с спрайтами.

Here is the site I am currently working on.

Я попробовал этот бит:

$("nav ul a").hover(function(){ 
    $(this).stop().fadeTo(300, 0.9); 
}, function(){ 
    $(this).stop().fadeTo(300, 0.1); 
}).fadeTo(0, 0.7); 

Но что делает все навигационные прозрачным. Это не то, что я хочу. Я добавил темный фон под навигацию, но он все еще выглядел не так. Я не могу придумать другого способа сделать это.

Херес 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; } 

Так навигация по умолчанию теперь can'thave что прозрачный внешний вид. Это должно быть нормально. Но когда я наводил курсор на кнопку, я хочу, чтобы эффект зависания исчезал и исчезал ... Можно ли это сделать?

Answer 1

Ни в коем случае не для эффекта затухания с помощью спрайта, вы должны использовать изображение в своем html, а другое в качестве фона, чтобы вы могли изменять непрозрачность только изображения html.

Answer 2

Похоже, что вы хотите не сделать его прозрачным после затухания, и в этом случае вы должны изменить непрозрачность при уходе за мышью, в настоящее время у вас есть 0.1 или 10% непрозрачность, но вы начинаете его на 70% непрозрачности, так что кажется, вы хотите, чтобы вернуться к 70%, как это:

$("nav ul a").hover(function(){ 
    $(this).stop().fadeTo(300, 0.9); 
}, function(){ 
    $(this).stop().fadeTo(300, 0.7); //<--change this to 0.7 
}).fadeTo(0, 0.7); 

You can test it here.