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

Использование JQuery вместе со спрайтом изображения

0 голосов
/ 16 октября 2011

В настоящее время я использую CSS и спрайт изображений для своей навигации (код ниже).Это работает так, как задумано, однако я хотел бы облегчить этот переход с постепенным исчезновением.

Я считаю, что для этого лучше всего использовать JQuery, однако я бы хотел оставить CSS, чтобы добавить поддержку дляте, у которых отключен Javascript.Кто-нибудь может указать мне правильное направление, как добиться этого «сотрудничества»?!

HTML: 

<ul id="menu">
    <li id="home"><a href="#"></a></li>
</ul>

CSS: 

nav
{
    margin-top: 17px;
    float: right;
}

nav #menu
{
    display: block;
    height: 22px;
    margin: 0px;
    padding: 0px;
}

nav #menu li
{
    list-style-type: none;
    float: left;
    padding-left: 28px;
}

nav #menu li a
{
    background: url(/Content/Images/navigation.png) no-repeat;
    height: 22px;
    display: block;
}

nav #menu #home 
{
    width: 53px;
}

nav #menu #home a:hover
{
    background-position: 0 -22px;
}

Ответы [ 2 ]

3 голосов
/ 16 октября 2011

Я бы сделал одну из двух вещей:

1) Поэкспериментируйте с функцией animate в jQuery.
2) Создайте оболочку в li: 

<ul>
    <li><span class="bg-image" /><a href="#"></li>
</ul>

Затем используйте jQuery следующим образом: 

$(document).ready(function () {
    $("#menu li a").bind("mouseover", function () {
        $(this).siblings("span.bg-image").css("background", "url(URL TO IMAGE)").hide().fadeIn(100);
    })
});

Повторите и используйте не горячее изображение для мыши.Я предполагаю, что вы использовали бы прозрачное изображение типа заполнителя для не горячего состояния, убедитесь, что ширина / высота одинаковы для горячего класса.

1 голос
/ 16 октября 2011

Добавьте класс в тело и удалите его с помощью javascript сразу после открытия. 

<body class="nojs">
<script>$("body").removeClass("nojs").addClass("js")</script>

Теперь в CSS вы можете добавить любые правила для всех без JavaScript 

.nojs #boton1:hover {background: url(navigation.png) no-repeat;}

И создавать правила только для людей с активированным JavaScript 

.js #boton1 {}
...