[jQuery] Faire glisser le background d'une balise <a> au survol

Hello,

Je cherche à dynamiser un peu le menu de ce site : http://www.salicorne-en-aude.fr/manifestations

J'utilise la technique des portes coulissantes sur les balises <a> pour le menu avec l'image suivante :
http://www.salicorne-en-aude.fr/assets/templates/Salicorne/images/menu.jpg

Et le balisage du menu est le suivant :

<div id="menu">
<dl>
  <dt id="id1" ><a href="accueil"><span>Accueil</span></a></dt>
  <dt id="id2" ><a href="le-domaine"><span>Le domaine</span></a></dt>
  <dt id="id3" ><a href="archeologie"><span>Archéologie</span></a></dt>
  <dt id="id4" ><a href="histoire"><span>Histoire</span></a></dt>
  <dt id="id5"  class="here"><a href="manifestations"><span>Manifestations</span></a></dt>
  <dt id="id6" ><a href="vie-associative"><span>Vie associative</span></a></dt>
</dl>
</div>

Pour le dynamiser, au lieu d'avoir un effet on/off au survol du menu, je pensais faire en sorte d'avoir un slide du background (l'onglet descend de manière fluide au survol).

Avez-vous une idée de la méthode pour arriver à réaliser cet effet ?

Bonjour,

Remarques en vrac:

- L'utilisation d'une liste de définitions est erronée ici. Une liste simple (liste UL non ordonnée) serait plus appropriée.

- La technique que tu emploies pour l'instant n'est pas accessible. Tu masques en CSS le contenu des SPAN, que tu remplaces par des images de fond, ce qui posera forcément problème dans certains cas ou contextes d'utilisation.

- L'image que tu utilises ne te permet pas de réaliser l'effet suggéré. Il faut envisager une solution complètement différente. Par exemple, tu pourrais incrémenter le padding-top du lien lors du survol, et le diminuer progressivement lorsque le pointeur de la souris ne survole plus le lien.

Spheerys a écrit :
Avez-vous une idée de la méthode pour arriver à réaliser cet effet ?

S'écrire un petit script ad hoc. Par exemple sur base jQuery (ou autre) pour se simplifier la tâche.

Salut,

a écrit :
Avez-vous une idée de la méthode pour arriver à réaliser cet effet ?

Le plugin Background-Position te permettra d'animer le background comme n'importe quelle propriété CSS :

$('#monElement').animate({backgroundPosition: '(nouvellePosition)'});

(Attention toutefois aux parenthèses autour de la nouvelle position)

Merci Florent V. pour tes judicieuses remarques, je vais voir ça.

Marcv : ton script répond effectivement à ma problématique. Merci