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

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

0 голосов
/ 10 октября 2010

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

Вот сайт, над которым я сейчас работаю.

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

  $("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; }

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

Ответы [ 2 ]

0 голосов
/ 10 октября 2010

Похоже, что вы хотите, чтобы не сделать его прозрачным после затухания, в этом случае вы должны изменить непрозрачность при исчезновении мыши, в настоящее время у вас она будет равна 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);

Вы можете проверить это здесь .

0 голосов
/ 10 октября 2010

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

...