Использование jQuery и спрайтов - PullRequest
Новая
       2

Использование jQuery и спрайтов

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

Я ищу способ оживить моих спрайтов с помощью 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; }

Ответы [ 2 ]

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

В этом вопросе нет ничего конкретного для спрайтов.Вы всегда можете использовать обычный метод, комбинируя событие 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.

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

Проверьте этот скриншот от CSS Tricks. Он занимается анимацией CSS-спрайтов.

...