[jQuery] Animated Menu Hover doesn't work on Safari and Opera
Hi all, and thank by advance for your help !
I use the last jquery javascript for working my animated menu with
hover function.
I've this code in my header:
<script type="text/javascript">
$(document).ready(function(){
$(".menu2 a").append("<em></em>");
$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>
And this code in my body :
<ul class="menu2">
<li>
<a href="index.php?lang=fr&nav=rent&type=nancites"
onclick="return hs.htmlExpand(this, { objectType: \'ajax\', width:
970} )" title="Villa Nancites"><img src="./assets/villas/nancites.jpg"
width="130" /></a>
</li>
<li>
<a href="index.php?lang=fr&nav=rent&type=dulce"
onclick="return hs.htmlExpand(this, { objectType: \'ajax\', width:
970} )" title="Villa Dulce"><img src="./assets/villas/dulce.jpg"
width="130" /></a>
</li>
<li>
<a href="index.php?lang=fr&nav=rent&type=quebrada"
onclick="return hs.htmlExpand(this, { objectType: \'ajax\', width:
970} )" title="Casa Quebrada"><img src="./assets/villas/quebrada.jpg"
width="130" /></a>
</li>
<li>
<a href="index.php?lang=fr&nav=rent&type=pluma"
onclick="return hs.htmlExpand(this, { objectType: \'ajax\', width:
970} )" title="Casa Pluma"><img src="./assets/villas/pluma.jpg"
width="130" /></a>
</li>
<li>
<a href="index.php?lang=fr&nav=rent&type=coco"
onclick="return hs.htmlExpand(this, { objectType: \'ajax\', width:
970} )" title="Cabina Coco"><img src="./assets/villas/coco.jpg"
width="130" /></a>
</li>
<li>
<a href="index.php?lang=fr&nav=rent&type=flora"
onclick="return hs.htmlExpand(this, { objectType: \'ajax\', width:
970} )" title="Cabina Flora"><img src="./assets/villas/flora.jpg"
width="130" /></a>
</li>
</ul>
That works perfectly on FireFox and IE6 (except png :p) but doesn't
work on Opera and Safari...
Anyone have a suggestion ?