JQuery Dropdown-Menü slideup und slidedown auf schweben verwendet, ist sprunghaft

Question

Ich habe ein sehr einfaches Drop-Down-Menü mit jQuery slideup und slidedown für die Funktionen gemacht - aber es wird sehr nervös (ich bin mit Firefox 3.6.8), wenn die Maus schnell über sie bewegt wird, oder wenn die Maus wird auf einem der Menüpunkte statt.

Ich habe ein funktionierendes Beispiel unter folgendem Link aus:

http://jsfiddle.net/jUraw/19/

Ohne die .stop (true, true) Funktion es ist noch schlimmer. Ich habe auch versucht, das Hinzufügen Hover-Absicht, sondern weil ich ein Hover-triggered Diashow in der gleichen div habe es Konflikte mit der Funktionalität der Diashow.

Gibt es etwas, was ich vermisst habe? Ich habe clearqueue Macht Arbeit gehört, oder vielleicht Timeout, kann aber nicht herausfinden, wo sie hinzuzufügen.

Danke alle.

Answer 1

Sie in einer leichten Verzögerung bauen könnte, sagen 200ms für die Animation zu vervollständigen, damit es nicht schreckhaft ist, aber lassen .stop() so wird es noch nicht aufbauen, wie folgt aus:

$(function () {    
  $('#nav li').hover(function () {
     clearTimeout($.data(this, 'timer'));
     $('ul', this).stop(true, true).slideDown(200);
  }, function () {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul', this).stop(true, true).slideUp(200);
    }, this), 200));
  });
});

Sie können es versuchen hier dieser Ansatz verwendet $.data() das Timeout speichern pro Element , so dass jedes Menü unabhängig behandelt, wenn Sie viele Menüpunkte haben dies sollte einen schönen Effekt geben.

Answer 2

Dieses fügt eine leichte Verzögerung auf offenen -. So über sie läuft schnell das Menü nicht herausspringen

$(function () {    
  $('#nav li').hover(function () {
    $('ul', this).stop(true, true).delay(200).slideDown(200);
  }, function () {
    $('ul', this).stop(true, true).slideUp(200);
  });
});