jQuery animer mouseover/mouseout garder menu déroulant visible

Question

J'essaie de créer un menu déroulant de base avec animation et je suis confronté au problème où je n'arrive pas à comprendre comment garder la partie déroulante ouverte jusqu'à la souris feuilles. Y a-t-il un moyen facile de dire cela pour rester ouvert? Je sais que ce que j'ai est complètement faux en ce qui concerne la fonction mouseout .clickme car elle va décharger le menu en conséquence.

Si quelqu'un peut aider dans ce cas précis, je serais très reconnaissant.

$(document).ready(function() { 

$('.clickme').mouseover(function() { 
    $('#slidebox').animate({ 
     top: '+=160' 
    }, 200, 'easeOutQuad'); 
}); 

$('.clickme').mouseout(function(){ 
    $('#slidebox').animate({ 
     top: '-=160' 
    }, 200, 'easeOutQuad') 
}); 

});

Answer 1

Cela devrait vous permettre de continuer sans aucun changement de balisage:

$('.clickme, #slidebox').hover(function() { 
    $('#slidebox').stop().animate({ top: '30px' }, 200, 'easeOutQuad'); 
}, function() { 
    $('#slidebox').stop().animate({ top: '-130px' }, 200, 'easeOutQuad'); 
}); 

Étant donné que vos éléments ne sont pas parent/enfant lié, plus facile à mettre des positions absolues dans le menu (il a 130px dans le CSS de toute façon), donc aucune raison de ne pas utiliser le fait qu'il a une position absolue. Donner un coup de feu, j'ai testé contre votre site, semble être le comportement que je voudrais dans un menu.

Answer 2

Découvrez jquery hoverIntent