JQuery анимация при наведении курсора мыши / мышки держать выпадающее меню видимым

Question

Я пытаюсь создать простое выпадающее меню с помощью animate и сталкиваюсь с проблемой, из-за которой я не могу понять, как сохранить раскрывающуюся часть открытой, пока мышь не уйдет. Есть ли простой способ сказать это, чтобы остаться открытым? Я знаю, что у меня совершенно неправильно в отношении функции мыши .clickme, так как она соответствующим образом выгружает меню.

Если кто-то может помочь в этом конкретном случае, я был бы очень благодарен.

$(document).ready(function() {

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

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

});

Answer 1

Это должно помочь вам без изменений разметки:

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

Поскольку ваши элементы не связаны с родительским / дочерним элементами, проще поместить абсолютные позиции в меню (в любом случае в CSS оно имеет 130px), поэтому нет причин не использовать тот факт, что у него абсолютная позиция. Попробуй, я протестировал на твоем сайте, похоже, что я бы хотел, чтобы в меню.

Answer 2

Проверьте jquery hoverIntent