JQuery的鼠標事件觸發的聲明如果

我有一個綁定，我要控制好一點..下面的代碼第一關：JQuery的鼠標事件觸發的聲明如果

$('#topnav').bind({ 

          mouseenter: function() { 
           $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'}); 
          }, 
          mouseleave: function() { 
            $("#topnav").delay(2000).animate({opacity: 0.9, width: '310px', height: '33px'}); 
          } 

          });

目前你看到的我是延遲鼠標離開，因爲導航欄的人「mouseenter-ing」非常小，如果鼠標恰好離開一秒鐘，它會觸發mouseleave事件。我想更好地控制這一點。我想要一些類型的if語句，說：「如果鼠標離開#topnav div少於三秒鐘，並重新進入，假裝鼠標從來沒有離開」

如果這沒有意義，我會澄清。

謝謝！

來源

2012-10-02 greycode

http://cherne.net/brian的/resources/jquery.hoverIntent.html –

@MattBall我真的很喜歡Jquery版本，而不是有另一個腳本來控制它。謝謝 – greycode

HoverIntent是一個jQuery插件。這意味着它是_is_ jQuery。你想讓我們爲你重新發明輪子嗎？這已被解決，不再是一個有趣的問題。我會通過;享受你的夜晚。 –

您可以用setTimeout()和clearTimeout()實現這一目標：

var tout; 
$('#topnav').bind({ 
    mouseenter: function() { 
    clearTimeout(tout); 
    $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'}); 
    }, 
    mouseleave: function() { 
    tout = setTimeout(function() { 
     $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'}); 
    }, 2000); 
    } 
});

來源

2012-10-02 03:23:28 smitelli

你更快^^ – supernova

@ScottS謝謝你，作品像一個夢。感謝您的簡單回答！ – greycode

利用setTimeout（）和clearTimeout（）

var timeout = null 
var onMouseEnter = function(){ 
    clearTimeout(timeout) 
    $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'}) 
} 

var onMouseLeave = function(){ 
    timeout = setTimeout(function(){ 
    $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'}); 
    },1000) 
} 

$('#topnav').bind({ mouseenter: onMouseEnter, mouseleave: onMouseLeave })

http://jsfiddle.net/gmhLZ/

來源

2012-10-02 03:24:56 supernova

JQuery的鼠標事件觸發的聲明如果

回答

相關問題