Question

我正在编写一个简单的jquery菜单系统，用于在文本链接上显示/隐藏鼠标上的DIV。

我想在幻灯片发生之前实现一个短暂的暂停，这样如果鼠标只是飞过菜单链接，那么菜单就不会下降。

这就是我目前激活菜单的方式：

<script type="text/javascript"><!--
$('#aboutLink').mouseover(function() {$('#aboutMenu1').slideDown('fast');
$('#aboutLink').css("color", "#ff297b");});
 --></script>

所以实际上我需要做的是鼠标悬停，等待300毫秒，然后，如果鼠标仍然在链接上，请做动画。

Answer 1

我建议使用hoverIntent：http://cherne.net/brian/resources/jquery.hoverIntent.html

var config = {    
     sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
     interval: 200, // number = milliseconds for onMouseOver polling interval    
     timeout: 500, // number = milliseconds delay before onMouseOut    
};

$(document).ready(function(){
  $('ul#menu > li').hoverIntent(
    // mouseover
    function(){
      $(this).find('>ul').fadeIn('fast');
    },
    // mouseout
    function(){
       $(this).find('>ul').fadeOut('fast');
    }  
  );
});

Answer 2

您可能想要做类似的事情：

var timeout;

$('#aboutLink').mouseover(function() {
    timeout = window.setTimeout(function() {
        $('#aboutMenu1').slideDown('fast');
        $('#aboutLink').css("color", "#ff297b");
    }, 300);
});

$('#aboutLink').mouseout(function() {
    if(timeout) {
        window.clearTimeout(timeout);
    }
});

首先设置超时，它将在300ms后执行给定的函数，但如果用户离开div，则超时被清除，不会发生任何事情。

Answer 3

<script type="text/javascript"><!--
var timeout;
var delay = 300;

$('#aboutLink').hover(function() {
    timeout = setTimeout(function(){
       $('#aboutMenu1').slideDown('fast');
    }, delay);
}, function(){
   if(timeout) clearTimeout(timeout);
});
$('#aboutLink').css("color", "#ff297b");});
--></script>

Answer 4

使用window.setTimeout

另外，我会推荐鼠标事件mouseleave和mouseenter（请参阅http://api.jquery.com/mouseenter/）。为您节省处理嵌套元素的麻烦

然后你有

var timeoutId;

$(...).mouseleave(function (ev) { 
    if (timeoutId) { 
        window.clearTimeout(timeoutId);  
    }
    else {
        // either remove the menu or set a similar timeout for disappearance
    }
});

$(...).mouseenter(function (ev) { 
    if (timeoutId) { 
        // clear pending timeouts for other menu items
        window.clearTimeout(timeoutId); 
    }
    else {
        // either remove other menus or transition them out
    }

    timeoutId = window.setTimeout(function () {
        // show menu
    }, 300); 
});

这样做会让你有一个简单的逻辑，因为你总是在看当前的元素。通过清除mouseenter上的任何超时，您不必处理其他元素。

你当然可以捣乱并为每个单独的菜单条目设置超时 - 为您提供更好的过渡效果。但是你必须要管理更多的复杂性。

在jquery动画之前实现一个短暂的暂停

4 个答案: