0

ユーザーがマウスカーソルをタブの上に置くとすぐにタブが上に展開するメニューバーを開発したいと思います。実際には、1つの問題がありますが、非常にうまく機能します。ユーザーがマウスカーソルを1つのタブの上に置いてから、タブの上に非常に速く移動すると、タブは非常に頻繁に、非常に速く上下に移動し始めます。ちらつきます。

これが私がそれをどのように実装したかの例です：http：//jsfiddle.net/enne87/wLGDG/34/

「カーソルをタブの上に移動してから上に移動する」と言ったときの意味をご存知だと思います。そうでない場合は、私が言っていることをより正確に示すビデオをお見せすることができます。

ところで。アニメーションのjavascriptコードは次のとおりです。

  $('#primaryMenu ul.menu li:nth-child(1)').hover(
  function () {
      $(this,this).stop(true,true).animate({bottom: '+=55'}, 300, function() {}); 
  },
  function () {
      $(this,this).stop(true,true).animate({bottom: '-=55'}, 300, function() {});
  }
);

助けていただければ幸いです。

乾杯、エンネ

4

1 に答える 1

0

私はこれが修正されたコードではないことを知っていますが、ここに問題があります：

問題

実際にliは、アーティファクトを作成しているノード全体の場所をアニメーション化しています。他の読者のために明確にするために：

  1. フィドルのライブサンプルに移動し、下からメニュー項目にアプローチします。マウスを動かさないでください
  2. 上向きのアニメーションは完了しますが、マウスが「脱退」をトリガーし、下向きに動き始めます。
  3. アニメーションダウンは完了しますが、その後「enter」がトリガーされ、無限のサイクルで再び起動します。

ちらつきは、これのより極端なバージョンから来ています：

  1. メニューの下からアプローチします。アニメーションが上に移動し始めます
  2. アニメーションアイテムに向かってマウスを上に動かします

マウスを動かすと、上向きの「停止」がトリガーされ、要素がアニメーションの上部に直接送信されます。ただし、要素がまだ上部にない場合は、要素を再入力してアニメーションをトリガーします。要素がまだ上部にないときにマウスを上に動かすと、「脱退」がトリガーされ、要素が直接下部に送信されます。

ふぅ

修正

だから、修正？メニューの場所をアニメーション化する代わりに、高さを押し下げずに上にアニメーション化する方法を考案します（現在のCSSでは、高さをアニメーション化するだけで、灰色がli上ではなく下に拡大します）。これには、その切り替えに対応するためにCSSを改訂することが含まれます。ブロック全体の高さを200pxに保つ必要があると設計で指示されている場合（ブロックが動いているように見せるため）、イベントは、ではなく、ある種の透明なコンテナーにバインドする必要がありLIます。

無関係なもの

それまでの間、元のコードにはいくつかの根本的な問題があります。

  1. $(this,this)mouseenter / mouseleaveのセレクターはなぜですか？2番目のオプションのセレクターはコンテキストです。両方に同じセレクターを使用してもコンテキストは作成されないため、を使用する必要があります$(this)。

  2. イベントを2回バインドする必要はありません。どちらliも同じ説明に一致するため、セレクターに次のものを検索させることができます。

$('#primaryMenu ul.menu li').hover( /* ... */);

または、何らかの理由でliイベントのあるものを指定することが実際に重要である場合は、それらをまとめます。

$('#primaryMenu ul.menu li:nth-child(1), #primaryMenu ul.menu li:nth-child(2)')
于 2012-04-07T17:07:24.870 に答える