14

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

次のリンクで実際の例を作成しました。

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

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

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

皆さんありがとう。

4

2 に答える 2

24

アニメーションが完了するのに 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()ごとにタイムアウトを保存するために使用されるため、各メニューは個別に処理されます。多くのメニュー項目がある場合、これは素晴らしい効果をもたらすはずです。

于 2010-09-14T23:06:11.067 に答える
2

これにより、開くときにわずかな遅延が追加されるため、すぐに実行してもメニューがポップアップしません。

$(function () {    
  $('#nav li').hover(function () {
    $('ul', this).stop(true, true).delay(200).slideDown(200);
  }, function () {
    $('ul', this).stop(true, true).slideUp(200);
  });
});
于 2010-09-15T00:15:47.420 に答える