Hi mates, i'm having trouble using the stop() function. I'm trying to make a dynamic menu using jquery library. This menu is now working pretty corretly but i can't manage the problem of multiple queued animations.
My menu is made in two parts. The first one contains buttons. When they're hovered over, the second level of the menu appears just underneath. But when several buttons of the first menu are hovered over, i can't stop the second level to appear and disappear anarchically.
So i hope someone here could help me :D
Here is an example of code of the second menu :
<div class ="menu_deroulant">
<!-- ######## Menu Déroulant niveau 1 || Accueil ####### !-->
<div id ="menu_deroulant_accueil">
<div class="nom_speedbarre">Accueil</div>
<ul>
<li ><a href="***.php" ><span>***</span></a></li>
<li ><a href="***.php" ><span>***</span></a></li>
<li ><a href="***.php" ><span>***</span></a></li>
<li ><a href="***.php" ><span>***</span></a></li>
<li ><a href="***.php" width=190><span>***</span></a></li>
</ul>
</div>
<!-- ############################## !-->
</div>
Here is the javascript part :
$(function(){
$('.menu_deroulant').animate({"opacity":0});
$('#speed_***').hover(function (){
$('.menu_deroulant').animate({"opacity":0}); $('.menu_deroulant:first').animate({"opacity":1});
});
$('#speed_***').hover(function(){
$('.menu_deroulant').animate({"opacity":0}); $('.menu_deroulant:eq(1)').animate({"opacity":1});
});
So my idea was to add stop() functions right before my .animates().
But, if i do so, me 2nd menu won't even appear. I can't figure where i must put my stops to solve the problem !!
$('#speed_***').hover(function(){
$('.menu_deroulant').stop().animate({"opacity":0});
$('.menu_deroulant:eq(1)').stop().animate({"opacity":1});
});