Измените положение фона div при наведении на ссылку и сохраните положение с помощью мыши, jQuery

Я много искал, чтобы получить помощь, чтобы ответить на следующий вопрос:

Я хотел бы изменить положение фона изображения div с помощью jquery при наведении курсора на ссылку. На mouseOut текущая позиция должна быть сохранена.

Вариант использования: http://jsfiddle.net/c9wN9/1/

У меня есть изображение спрайта с четырьмя разными «состояниями». При загрузке страницы отображается состояние изображения один (позиция 0 0).

При наведении курсора на четыре разные ссылки (позиция 0 0 / 0 100 / 0 200 / 0 300) фоновая позиция должна измениться соответствующим образом и сохранить свою текущую позицию на mouseOut.

Кроме того, смена изображения может быть анимирована с помощью функций fadeIn/fadeOut, а текущая активная позиция может быть видна по ссылке. (активный класс на <a>?)

HTML-структура:

<div id="background"></div>
<a id="link1" href="#">State 1</a>
<a id="link2"href="#">State 2</a>
<a id="link3"href="#">State 3</a>
<a id="link4"href="#">State 4</a>

CSS

#background {
height: 100px;
width: 100px;
}

jQuery

?

Я сделал jsfiddle с основами и надеюсь на вашу поддержку jQuery: http://jsfiddle.net/c9wN9/1/

Заранее большое спасибо,

откровенный


jquery background sprite mouseout jquery-animate
person Trey    schedule 01.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не включил анимацию, но это должно делать именно то, что вы ищете.

<style>
#background {
height: 100px;
width: 100px;
background-img:('foo.png')}
#background.hover1{background-position:0px 0px} 
#background.hover2{background-position:0px 100px}
#background.hover3{background-position:0px 200px}
#background.hover4{background-position:0px 300px}
</style>

<div id="background"></div>
<a id="hover1" class="trigger" href="#">State 1</a>
<a id="hover2" class="trigger" href="#">State 2</a>
<a id="hover3" class="trigger" href="#">State 3</a>
<a id="hover4" class="trigger" href="#">State 4</a>

<script>
$(".trigger").hover(function (){
// get hover class
var hoverClass = $(this).attr('id');
// remove active class from any trigger link
$(".trigger").removeClass('active');
// add active class to current trigger link
$(this).addClass('active');
// add hover class to the background div to shift the background position
$("#background").removeClass().addClass(hoverClass);
});
</script>
person Cory    schedule 01.05.2013
comment
Карл, это прекрасно работает! Я обновил свою скрипку, чтобы все могли использовать jsfiddle.net/c9wN9/2 Большое спасибо :-) - person Trey; 02.05.2013