web-dev-qa-db-ja.com

スライドアップとホバーのスライドダウンを使用したJQueryドロップダウンメニューはびくびくしています

関数のjQueryスライドアップとスライドダウンを使用して非常に単純なドロップダウンメニューを作成しましたが、マウスをすばやく上に移動したり、マウスを押したままにすると、非常にジャンプします（Firefox 3.6.8を使用しています）。サブメニュー項目の1つ。

私は次のリンクで実用的な例を作成しました：

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

.stop（true、true）関数がないと、さらに悪化します。ホバーインテントを追加しようとしましたが、同じdivにホバートリガーのスライドショーがあるため、スライドショーの機能と競合します。

足りないものはありますか？ clearqueueが機能するか、タイムアウトになる可能性があると聞きましたが、どこに追加すればよいかわかりません。

皆さんありがとう。

jquerymenudrop-down-menuslideupslidedown
14
heathwaller

少し遅れてビルドすることもできます。たとえば、アニメーションが完了するまでに200ミリ秒かかるので、ジャンプしませんが、.stop()のままにしておくと、次のようにビルドされません。

_$(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));
  });
});
_

ここで試してみることができます 、このアプローチでは $.data() を使用して要素ごとのタイムアウトを保存しますしたがって、各メニューは個別に処理されます。メニュー項目が多い場合、これは素晴らしい効果をもたらすはずです。

23
Nick Craver

これは開くときにわずかな遅延を追加します-そのため、それをすぐに実行してもメニューが飛び出しません。

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