2

メニュー項目を上下にスライドさせるこのコードがあります。タイマーを追加して、スライドダウンしてからバックアップするのに遅延があるようにします。

$(function () {
    $("#menu").find("li").each(function () {
        if ($(this).find("ul").length > 0) {
            $(this).mouseenter(function () {
                $(this).find("ul").stop(true, true).slideDown();
            });
            $(this).mouseleave(function () {
                $(this).find("ul").stop(true, true).slideUp();
            });
        }
    });
});
4

2 に答える 2

4

jQueryでJavaScriptを書いているようです

jQueryには、.delayアニメーションキュー用の組み込み関数があります。

あなたの例では、スライドダウンアニメーションを300ミリ秒遅らせると次のようになります。

$(this).find("ul").stop(true, true).delay(300).slideDown();

jQueryの遅延を参照してください

于 2012-07-08T19:32:37.787 に答える
0

スマートなアプローチは、mouseleave をトリガーする前に待機するホバー インテントを追加することです。

jsBin デモ

$("#menu").find("li:has(ul)").on('mouseenter mouseleave',function( e ){
     var $UL = $(this).find('ul');
     if(e.type==='mouseenter'){
          clearTimeout( $(this).data('wait') );
          $UL.stop(1,1).slideDown();
     }else{            
          $(this).data('wait', setTimeout(function(){
              $UL.stop().slideUp();
          },180) );     
     } 
});
  • if ($(this).find("ul").length > 0) {単に use:を使用する代わりに、子として持つ要素で("li:has(ul)")
    のみイベントをトリガーします。li ul
  • eのイベント コールバックを追加しますmouseenter mouseleave。
  • eイベント == mouseenter.....elseの場合mouseleave。
  • data「待機」と呼ばれる属性をクリアして、子をスライドダウンするよりもul
  • ここで、元の要素を離れて「遠い」に到達するために、通常はすぐに「slideUp()」をトリガーする空白 (デモ) を越える必要がありますが、待機するそのデータ属性内にタイムアウトカウンターを設定します実行前に約 180 ミリ秒。liulli
  • 「遠い」ul要素に到達 - タイムアウトした「li」の子であるため、タイムアウトをクリアし (ステップ 1)、mouseenter 状態を「保持」します。

〜180ミリ秒を使用するか、マウスで「遠い」UL要素に到達するのに必要と思われる時間を使用してください

于 2012-07-08T19:51:24.743 に答える