[RESOLU] Menu horizontal animé avec js : Beug d'affichage...

Bonjour,

Je suis sur un projet de site vitrine, pour un restaurant indien dans le centre Dijonnais.

J'ai intégré le site en html, et animé le menu du site avec du js.

$("#licarte").bind("mouseenter",function(){
   $('#carte').animate({width: 325}, 300, function() {
      $('#textcarte').css('display','block');
      $('#textcarte').animate({opacity:1},100);
   });
}).bind("mouseleave",function(){
   $('#textcarte').animate({opacity:0},50);
   $('#textcarte').css('display','none');
   $('#carte').animate({width: 0}, 300);
});

Mon code Javascript:
Première partie, elle permet, lors du survol du quart de cercle jaune, d'étendre un bandeau horizontal de 0 à 325px situé à gauche du cercle, puis afficher un libellé en opacity de 0 à 1 en 100ms.
Tout ça fonctionne très bien, mais là où ça se gatte c'est quand le menu se replie...
La deuxième partie, passe l'opacité du texte à 0, puis réduit la taille du bandeau de 325 à 0px.

Comme vous pourrez le constater quand on brusque le menu, le texte reste afficher... En tout cas il y a un gros problème avec mes fonctions et je ne sais pas du tout comment y résoudre.

Je vous laisse un lien pour voir le site en direct :

http://davidlepauxdetest.chez.com/index.html
(L'url est vraiment sale !!! N'y faites pas attention merci)

Merci d'avance
Modifié par D@vID (02 Apr 2012 - 10:10)

Première chose qui va énormément limiter la casse : appliquer la propriété CSS overflow:hidden (masquer ce qui dépasse) aux blocs qui contiennent les textes.

Je vois aussi que tous tes éléments sont marqués par un id, or la plupart du CSS et du JS pourrait être appliqué de la même manière aux trois barre, donc utiliser des classes seraient plus optimisé.

Merci KyleKatarn je ne connaissait pas cette propriété...

Bonne journée et merci encore