can't seem to integrate HoverIntent in my existing Jquery hover code

Hello, I started with an easy Jquery script for a horizontal menu:

$(document).ready(function() {
$("ul#topn li").hover(function() { //Hover over event on list item
    $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
    $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
    $(this).css({ 'background' : 'none'}); //Ditch the background
    $(this).find("span").hide(); //Hide the subnav
});

I noticed that it gave a repeating effect, if the user would hover a few times he would have to wait until the effects were finished before he could actually use the menu. after some research i came to this:

$(document).ready(function() {
$("ul#topn li").find("span").stop().fadeTo('normal', 0).hide(); //Set opacity to 0

$("ul#topn li").hover(function() {
$(this).find("span").stop().fadeTo('normal', 1).show();
}).hover(function() { } ,

function() {
    $(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide()
});
}); });

works great, solved the first issue now i noticed when a user hovers towards a sub he accidentally can trigger another sub then he was first going to. And this is where i came to hoverIntent.

So I've been trying to integrate hoverIntent but I my knowledge is very poor and i fail. Most probably because i don't understand the code enough, so i would really appreciate if someone could tell me what i do wrong or how it should be done.

this is what i have been trying:

$(document).ready(function() {
$("ul#topn li").find("span").stop().fadeTo('normal', 0).hide(); //Set opacity to 0
$("ul#topn li").hoverIntent({
    sensitivity: 3, // How sensitive the hoverIntent should be
    interval: 200, // How often in milliseconds the onmouseover should be checked
over: showsub, // Function to call when mouseover is called    
timeout: 500, // How often in milliseconds the onmouseout should be checked
out: hidesub // Function to call when mouseout is called    
});
});
function hidesub() {
    $("ul#topn li").find("span").stop().fadeTo('normal', 0).hide();
}
function showsub() {
    function() {
        $("ul#topn li").find("span").stop().fadeTo('normal', 1).show();
        }).hover(function() { } }

I'm quite sure the showsub function is all wrong but this is as far as i got after some days.

any help would be really appreciated, thanks! ps i'm sorry the most important code isn't displayed as code :S

ansaurus

tags:

views:

answers:

can't seem to integrate HoverIntent in my existing Jquery hover code

related questions