Как управлять спрайтами CSS с помощью JQuery

Question

Как управлять спрайтами CSS с помощью JQuery

0

Это не оживляет, как я ожидаю, почему он не оживляет?

HTML

<div id='menuI'></div>

CSS

#menuI {
    height: 100px;
    width: 100px;
    background:url('https://www.teledynedalsa.com/images/semi/STA1600_2_200w.jpg') 0px 0px;
    text-align:justify;
}

JavaScript

$(document).ready(function(){
    $('#menuI').mouseenter(function(){
        $('#menuI').stop();
            $('#menuI').animate({
                backgroundPosition: '0px 100px'
            }); 
        });
    $('#menuI').mouseleave(function(){
        $('#menuI').stop();
        $('#menuI').animate({
            backgroundPosition: '0px 0px'
        }); 
    }); 
});

user3117081 19 дек. 2013, в 01:39

Источник

Теги:

javascript

jquery

css

2 ответа

Ещё вопросы

Hugo Tunius · Answer 1 · 2013-12-18T21-42-00.000Z

Как сказал showdev, для этого вам нужен плагин jQuery. Однако вы можете также рассмотреть возможность использования переходов, поскольку он очень хорошо подходит для этого.

Следующий css приведет к тому же

#menuI {
    height:100px;
    width:100px;
    background:url('https://www.teledynedalsa.com/images/semi/STA1600_2_200w.jpg') 0px 0px;
    transition: background linear 0.4s; //Add vendor prefixed versions
    text-align:justify;
}

#menuI:hover {
    background-position: 0px 100px;
}

Пример: http://jsfiddle.net/9fCnN/

Хорошая альтернатива использованию jQuery. Re: «версии с префиксом производителя» для кросс-браузерной поддержки: jsfiddle.net/9fCnN/1

showdev · Answer 2 · 2013-12-18T23-09-00.000Z

Я считаю, что плагин необходим для анимации "backgroundPosition".

У меня был успех с использованием свойства background-position-y:

$(document).ready(function () {
    $('#menuI').mouseenter(function () {
       $(this).stop().animate({'background-position-y':'100px'});
     });
    $('#menuI').mouseleave(function () {
        $(this).stop().animate({'background-position-y':'0px'});
    });
});

http://jsfiddle.net/Ub7aN/1/

Редактировать:

К сожалению, это не работает в Firefox.

См. Эти сообщения:
JQuery Анимация фонового изображения по оси Y
Анимировать фоновое положение y в Firefox с помощью JQuery

Это не работает в jsfidde или на вашей собственной странице? Что идет не так? Какая версия jQuery?
Мех. Видимо, это не работает в Firefox.
Работает в Chrome, хотя, странность; Я хотел бы, чтобы это поддерживалось во всех браузерах. Я мог бы просто написать свой собственный цикл, чтобы оживить его для кросс-браузерной поддержки: O
На SO есть еще несколько постов, посвященных анимации фонового положения. Вы можете проверить их. Несколько интересных методов. Также CSS переходы довольно приятные (см. Ответ @HugoTunius).