изменить DIV, когда парящая ссылку и сохранить позицию отведения указателя мыши, JQuery

Question

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

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

Use Case: http://jsfiddle.net/c9wN9/1/

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

При наведении курсора на четыре разных канала (позиция 0 0/0 0/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/

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

откровенны

Answer 1

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

<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>