Forum : Problème avec la fonction stop()

Bonjour à tous, j'essaye depuis peu de faire un menu horizontal déroulant sur mon site web.

Voici le code html du menu :

<div id="menu">
    <ul>
        <li class="menuFolder">
            Liste 1
            <ul>
                <li>Element 1</li>
                <li>Element 2</li>
            </ul>
        </li>
        <li class="menuFolder">
            Liste 2
            <ul>
                <li>Element 1</li>
                <li>Element 2</li>
            </ul>
        </li>
    </ul>
</div>

Et voici le code javascript :

$(
    function()
    {
        $('.menuFolder ul').css('display', 'block'); //Je fais un display: none dans le css pour éviter que les navigateurs ayant js désactivé aient les sous-menu affichés (qui empiéteraient sur le reste de la page)
        $('.menuFolder ul').hide();
        $('.menuFolder').mouseover( function()
                                    {
                                        $(this).children('ul').stop().slideDown();
                                    });
        $('.menuFolder').mouseout(  function()
                                    {
                                        $(this).children('ul').stop().fadeOut();
                                    });
    }
);

Mon problème est le suivant : avec ce code il se passe que si la souris passe sur .menuFolder et s'en retire rapidement (avant que le slideDown n'ai fini), au prochain passage sur .menuFolder le slideDown ira seulement jusqu'au moment où on l'avait quitté précédemment (pas jusqu'au bout).
Je pense que cela vient de la fonction stop() car sans elle tout marche bien (mise à part le fait que si l'on passe plusieurs fois la souris rapidement dessus les animations s'enchaînent à la queue).
Est-ce que vous auriez une idée pour résoudre ce problème ?
Merci d'avance ;)

PS: si vous n'avez pas tout saisi n'hésitez pas à me demander plus d'infos

Grafikart

Réponse acceptée

Et si tu enleve juste le stop du fadeOut() ?

chapa

Auteur

Ca marche pas non plus
Par contre j'ai trouvé autre chose :

$(
    function()
    {
        $('.menuFolder ul').css('display', 'block');
        $('.menuFolder ul').hide();
        $('.menuFolder').mouseover( function()
                                    {
                                        if($(this).children('ul').is(':hidden'))
                                            $(this).children('ul').dequeue().stop().slideDown();
                                    });
        $('.menuFolder').mouseout(  function()
                                    {
                                        $(this).children('ul').fadeOut();
                                    });
    }
);

Et avec ça ça marche :D
J'ai en effet enlevé le stop du fadeOut (qui posait problème car avec ça ne marchait pas) et ajouté une condition comme dans le tuto pour le menu accordéon (sinon ça ne marchais pas non plus)
Merci pour votre aide a+ :)

Problème avec la fonction stop()

2 réponses