jQuery animado mouseover / mouseout mantener menú desplegable visible

Question

Estoy tratando de hacer una gota básica menú con animado abajo y estoy corriendo en el problema por el que me parece que no puede encontrar la manera de mantener la parte desplegable abierta hasta que las hojas del ratón. ¿Hay una manera fácil de decir esto a permanecer abierto? Yo sé lo que tengo es completamente equivocado respecto a la función .clickme mouseout ya que descargará el menú en consecuencia.

Si alguien puede ayudar en este caso concreto, yo sería muy agradecido.

$(document).ready(function() {

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

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

});

Answer 1

Esto debería ponerlas a ir sin ningún cambio marcado:

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

Debido a que sus elementos no son padre / hijo relacionados, más fácil de poner posiciones absolutas en el menú (tiene 130px en el CSS de todos modos), así que no hay razón para no utilizar el hecho de que tiene una posición absoluta. Darle un tiro, he probado en contra de su sitio, parece ser el comportamiento que me gustaría en un menú.

Answer 2

Salida jQuery hoverIntent