jQuery - 带有停止功能的延迟

Posted 2023-05-08

【中文标题】jQuery - 带有停止功能的延迟

【英文标题】：jQuery - delay with stop functions

【发布时间】：2012-01-10 01:34:36

【问题描述】：

考虑以下导航布局

---

主要导航

---

二级导航

---

子导航（仅在翻转时显示 主要或次要导航

---

我需要在 fadeOut 调用中有足够长的延迟，以便用户将鼠标从主导航移到 subnav，并且一旦在 subnav 上，我需要取消悬停fadeOut。将鼠标悬停在辅助导航项上时重复这个想法。 （我知道如何添加延迟但不知道如何取消悬停）

TIA

http://jsfiddle.net/Wm6Gp/

<div class="primary">
    <ul class="primary common">
        <li class="primary category" rel="politics">
            <a href="#">POLITICS</a>
        </li>
    </ul>
</div>
<div class="secondary">
    <ul class="secondary common">
        <li class="secondary category" rel="news">
            <a href="#">NEWS</a>
        </li>
    </ul>
</div>

<div style="display: block; height: 20px; width: 100px; overflow: hidden;">
    <div id="politics" class="sub" style="display: none;">
        <ul class="sub common">
            <li class="sub">
                <a href="#">POLITICS SUBNAV</a>
            </li>
        </ul>
    </div>
    <div id="news" class="sub" style="display: none;">
        <ul class="sub common">
            <li class="sub">
                <a href="#">NEWS SUBNAV</a>
            </li>
        </ul>
    </div>
</div>

$('.category').hover(
    function() 
        var subnav = $(this).attr('rel');
        $('#' + subnav).fadeIn('slow');
    , function() 
        var subnav = $(this).attr('rel');
    $('#' + subnav).fadeOut('slow');
);

【参考方案1】：

试试 jQuery Hover Intent 插件 - http://cherne.net/brian/resources/jquery.hoverIntent.html

【讨论】：

我实际上已经看过了，但没有看到它有什么帮助，因为它不会停止第二半的悬停淡出