jQuery - delay with stop functions

Question

Consider the following navigation layout

---

primary nav

---

secondary nav

---

sub nav (shown only on rollover of primary or secondary nav

---

I'm needing for there to be a delay in the fadeOut call long enough for a user to get their mouse from the primary nav to the subnav and once over the subnav I need the hover fadeOut cancelled. Repeating the idea when hovering over the secondary nav item. (I know how to add the delay but not how to cancel the hover)

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');
});

Answer 1

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