JQuery Animate MouseOver/Mouseout Mantenha o menu Drop Visible

Question

Estou tentando fazer um menu suspenso básico com Animate e estou enfrentando o problema em que não consigo descobrir como manter a parte suspensa aberta até que o mouse sai. Existe uma maneira fácil de dizer a isso para permanecer aberto? Sei que o que tenho está completamente errado em relação à função .Clickme MouseOut, pois ele descarregará o menu de acordo.

Se alguém puder ajudar nessa instância específica, eu ficaria super agradecido.

$(document).ready(function() {

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

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

});

Answer 1

Isso deve fazer você ir sem alterações de marcação:

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

Como seus elementos não são relacionados aos pais/filhos, mais fácil colocar posições absolutas no menu (ele tem 130px De qualquer forma, no CSS), então não há razão para não usar o fato de ter uma posição absoluta. Dê uma chance, testei contra o seu site, parece ser o comportamento que eu gostaria em um menu.

Answer 2

Confira o Hoverintent do JQuery