jQuery animieren Mouseover / mouseout Drop-Menü halten sichtbar

Question

Ich versuche, eine grundlegendes Drop-Down-Menü mit belebter zu machen und in die Frage leite, wo ich kann nicht scheinen, um herauszufinden, wie man den Drop-Down-Teil, bis die Maus Blätter offen zu halten. Gibt es eine einfache Möglichkeit, dies zu sagen, offen zu bleiben? Ich weiß, was ich habe, ist völlig falsch in Bezug auf die .clickme mouseout Funktion, da sie entsprechend das Menü entladen wird.

Wenn jemand in diesem konkreten Fall helfen kann, wäre ich super dankbar.

$(document).ready(function() {

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

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

});

Answer 1

Das sollten Sie ohne Markup-Änderungen erhalten gehen:

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

Da Ihre Elemente sind nicht Eltern / Kind bezogen, einfacher zu absoluten Positionen auf der Speisekarte zu setzen (es hat 130px im CSS sowieso), also kein Grund, die Tatsache nicht verwenden es eine absolute Position hat. Geben Sie ihm einen Schuss, ich gegen Ihre Website getestet, scheint das Verhalten zu sein, die ich in einem Menü wollen würde.

Answer 2

Überprüfen Sie heraus jquery hoverIntent