Modifier la position d'arrière-plan div lors du survol d'un lien et maintenir la position par mouseout, jQuery

Question

J'ai beaucoup cherché à obtenir de l'aide pour répondre à la question suivante:

Je voudrais changer la position d'arrière-plan de l'image d'un div jquery en survolant un lien. Sur mouseOut, la position actuelle doit être conservée.

Cas d'utilisation: http://jsfiddle.net/c9wN9/1/

J'ai une image sprite avec quatre différents "états". Lors du chargement de la page, l'état de l'image 1 (position 0 0) est affiché. En survolant quatre liaisons différentes (position 0 0/0 100/0 200/0 300), la position d'arrière-plan doit changer en conséquence et conserver sa position actuelle sur mouseOut.

De plus, le changement d'image pourrait être animé par fadeIn/fadeOut et la position active actuelle pourrait être rendue visible sur le lien. (Classe active sur le <a>?)

HTML Structure:

<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

? 

J'ai fait une jsFiddle avec les bases et espèrent votre Support jQuery: http://jsfiddle.net/c9wN9/1/

Merci beaucoup à l'avance,

franche

Answer 1

je ne comprend pas les animations, mais cela devrait faire exactement ce que vous cherchez.

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