2

私はこのコードを使用しています：

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function navBar_open()
{  navBar_canceltimer();
   navBar_close();
   ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function navBar_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function navBar_timer()
{  closetimer = window.setTimeout(navBar_close, timeout);}

function navBar_canceltimer()
{  if(closetimer)
   {  window.clearTimeout(closetimer);
      closetimer = null;}}

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open) //mouseover
   $('#navBar > li').bind('mouseout',  navBar_timer)}); //mouseout

document.onclick = navBar_close;

正常に動作します

私がやりたいのは、マウスオーバーイベントに遅延を追加することです

私は正直に言うと、このコードを別のサイトで見つけましたが、それがどのように機能するかを完全には理解していません。

ユーザーがマウスアウトすると、navBar_timer関数が呼び出され、ドロップダウンメニューが再び非表示になるまでに何らかの遅延が追加されますが、マウスオーバーにホバーを実装する方法がよくわかりません。

任意のガイダンスをいただければ幸いです

ありがとう

4

6 に答える 6

2

どのバージョンのJqueryを使用していますか？$.delay()新しい機能（1.4）を使用している場合は、新しい機能を利用できるはずです。次に、変更する必要があるのは、次の1行だけですnavBar_open()。

ddmenuitem = $(this).find('ul').delay(timeout).css('visibility', 'visible');
于 2010-01-24T04:06:54.413 に答える
1

このようなものは、jquert1.4以降でうまくいきます。hoverIntentプラグインは必要ありません：

$("#yourdiv").hover(function(){
    $(this).stop(true).delay(400).animate({"height":"300px"},800, "easeOutBounce");
},function(){
    $(this).stop(true).animate({"height":"25px"}, 300, "easeOutBack");
});

停止要素の後に遅延関数を追加するだけです。要素にカーソルを合わせると、メニューを展開する前に400ミリ秒待機します。400msの時間枠の前にマウスを要素の外に移動すると、メニューは開きません。

于 2011-12-21T16:32:59.517 に答える
1

これはあなたが探しているものです... http：//cherne.net/brian/resources/jquery.hoverIntent.htmlをクリックしてください

于 2010-01-24T04:53:10.550 に答える
1

これを変更してみてください：

$(document).ready(function()
{  $('#navBar > li').bind('mouseover', navBar_open) //mouseover
   $('#navBar > li').bind('mouseout',  navBar_timer)}); //mouseout

これに：

$(document).ready(function() {
    $('#navBar > li').hover(function() {
        closeHoverTimer = window.setTimeout(navBar_open, 500); //500ms timeout);
    }, function() {
        navBar_timer();
        window.clearTimeout(closeHoverTimer);
    });
});
于 2010-01-24T00:54:27.257 に答える
0

これも機能するはずです：

    $('#navBar > li').hover(
        function() {
            var newthis = $(this);
            timer = setInterval(function() {showTip(newthis)}, delay);
        },
        function() {
            clearInterval(timer);
            $(this).find('ul:visible').fadeOut(speed);
        },
        showTip = function(newthis) {
            clearInterval(timer);
            newthis.find('ul:hidden').fadeIn(speed);
        }
    );
于 2010-06-03T01:43:27.567 に答える
0

私は、hoverIntentプラグインを使用するというReigelの2番目の推奨事項です。他のjquery関数を遅らせるために、私はこの関数を使用する傾向があります：

  var delay = (function(){
    var timer = 0;
    return function(callback, ms){
      clearTimeout (timer);
      timer = setTimeout(callback, ms);
    };
  })();

そしてそれを呼んでください：

delay (function () {
    // add whatever function you want delayed by 2 secs
}, 2000);
于 2010-01-24T05:34:09.733 に答える