Jquery compatibilite firefox, internet explorer ok ...safari probleme

Bonjour,

J'ai fait un menu en anime en jquery sur ce site :
http://carton.tymate.eu/
Malheureusement mon jquery n'est pas compris sur Safari et opera.


Entierement en jquery:
1- j'insere une div dans mon code html. elle se place a l'interieur du code dans mes boutons de menu.
2-je positionne cette div en absolute et la place sous les autres elements et lui donne un background-color gris.
3-je lui indique une hauteur a 0 et une width 100% de la taille de son conteneur (c'est a dire les boutons eux meme). Ainsi elle invisible au depart.

4-au survol du bouton je demande a cette div de passer de 0 en height a 100% et vice versa quand la souris quitte le bouton.

J'obtiens ainsi une jolie animation de bouton sur firefox et internet explorer mais riensur de correct sur safari et opera.

Tout ca a surement un rapport avec le chargemenent du DOM.

Je vous met mon code ici :

Le code html avec la div inseree en :

<div class="moduletable_bandemenubas">
<ul class="menu_menuprincipalbas">

<li id="current" class="active item1">
<a style="color: rgb(115, 115, 115);" href="http://carton.tymate.eu/">
<span>Accueil</span></a><div class="fond_anime_btmenu" style="background-color: rgb(67, 67, 69); position: absolute; left: 0pt; top: 0pt; z-index: 1; width: 100%; height: 0px; display: block;"> </div></li>

<li class="item2"><a href="#"><span>Présentation</span></a><div class="fond_anime_btmenu" style="background-color: rgb(67, 67, 69); position: absolute; left: 0pt; top: 0pt; z-index: 1; width: 100%; height: 0%;"> </div></li><li class="item3"><a style="color: rgb(115, 115, 115);" href="/index.php?option=com_joomgallery&amp;Itemid=3"><span>Projets</span></a><div class="fond_anime_btmenu" style="background-color: rgb(67, 67, 69); position: absolute; left: 0pt; top: 0pt; z-index: 1; width: 100%; height: 0px; display: block;"> </div></li>

<li class="item4"><a style="color: rgb(115, 115, 115);" href="#"><span>Partenaires</span></a><div class="fond_anime_btmenu" style="background-color: rgb(67, 67, 69); position: absolute; left: 0pt; top: 0pt; z-index: 1; width: 100%; height: 0px; display: block;"> </div></li>

<li class="item5"><a href="#"><span>Contact</span></a><div class="fond_anime_btmenu" style="background-color: rgb(67, 67, 69); position: absolute; left: 0pt; top: 0pt; z-index: 1; width: 100%; height: 0%;"> </div></li></ul>		</div>

		

Et mon code jquery :

$("document").ready(function() {
							 
$("ul.menu_menuprincipalbas li a").after('<div class="fond_anime_btmenu" style="background-color:#434345;position:absolute;left:0;top:0;z-index:1; width:100%;height:0%;"> </div>');
							 
							
 $("ul.menu_menuprincipalbas li").mouseenter(function(){
									      $(this).find("div.fond_anime_btmenu").animate({height:"100%"},0500 )
 $(this).find("a").css({"color":"#fff"});
									 
 });
							 
 $("ul.menu_menuprincipalbas li").mouseleave(function(){
									 $(this).find("div.fond_anime_btmenu").animate({height:0},0200)   ;
$(this).find("a").css({"color":"#737373"});
 });
							 
							 
 });

J'espere qu'un as en jquery saura comprendre d'ou vient ce probleme sur safari et opera et comment m'aider.

Merci pour votre aide,
Modifié par boucdur00000 (25 Mar 2010 - 23:18)