Problème jQuery avec slideUp/Down et clearQueue

Question

J'ai un menu déroulant qui est affiché et caché (slideUp et slideDown) lorsque je survole un élément en utilisant jQuery...

$("#element").hover( function() {
    $(this).next().clearQueue();
    $(this).next().slideDown(); //animate({height:300},100);
}, function() {
    if (!$(this).next().is(':hover')) {
        $(this).next().clearQueue();
        $(this).next().slideUp(); //animate({height:0},100);
    }
});

À l'origine, je n'avais pas inclus la ligne clearQueue(), mais cela causait une mise en file d'attente et une animation prolongée du slideUp/Down si l'utilisateur survolait et sortait rapidement de #element.

Ajouter cette ligne signifie que le menu déroulant n'apparaît pas complètement si l'utilisateur survole et quitte rapidement.

Je peux contourner ce problème en animant le slideDown, mais le problème est que je ne connais pas la hauteur exacte vers laquelle je dois animer car elle peut changer.

Y a-t-il un moyen d'arrêter ce comportement?

Answer 1

J'ai rencontré un problème similaire avec slideUp et slideDown où slideDown donnait à mon élément une hauteur statique pendant l'animation alors que l'élément devait rester de taille dynamique car son contenu pouvait changer à tout moment. J'ai résolu ce problème en définissant la valeur de hauteur du CSS sur une chaîne vide (c'est-à-dire '') dans le callback animationFinished.

Donc cela devrait résoudre votre problème :

$("#element").hover(function () {
    $(this).next().stop(true).slideDown(400, function () { // .stop(true) est essentiellement la même chose que .clearQueue() sauf qu'il arrête et efface uniquement les animations
        $(this).css('height', '');
    }); //animate({height:300},100);
}, function () {
    if (!$(this).next().is(':hover')) {
        $(this).next().stop(true).slideUp(); //animate({height:0},100);
    }
});