Adding different timeout's to jQuery scripts

Question

i have a litte problem...

i created a litte script (for jQuery HoverIntent-Plugin)

the script is showing my submenu for 7 seconds

( WORKS PERFECT )

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
        $(".navi-item").hoverIntent({
            over: showSub,
            timeout: 7000,
            out: hideSub
            });
        });
    function showSub(){ $(this).find('>ul').fadeIn(100); }
    function hideSub(){ $(this).find('>ul').fadeOut(100); }
</script>

now i created another script (for jQuery HoverIntent-Plugin)

the script is adding a class for 3 seconds if a specifi class isn't set

( WORKS ONLY WHEN I DISABLE THE CODE ABOVE )

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $(".navi-item").hoverIntent({    
                timeout: 3000,  
                over:function(){
                    if (!$(this).hasClass("active")) {
                        $(this).addClass("active2");
                    }
                },
                out: function(){
                    $(this).removeClass("active2");
                }
            });
        });
</script> 

now i tried to combine both codes

( WORKS.. but only with 1 timeout )

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $(".navi-item").hoverIntent({    
                timeout: 7000,  
                over:function(){
                    if (!$(this).hasClass("active")) {
                        $(this).addClass("active2"); // ADDCLASS
                    }
                    $(this).find('>ul').fadeIn(100); // SUBMENU
                },
                out: function(){
                    $(this).removeClass("active2"); // ADDCLASS
                    $(this).find('>ul').fadeOut(100); // SUBMENU
                }
            });
        });
</script>

is there a way to keep running script 1 and 2 at the same time?

OR

is it possible to set different timeouts from hoverintent to //ADDCLASS and //SUBMENU

regards berni

Answer 1

EDIT: Github link to my version of the plugin, for anyone who finds this in the future. It's not particularly well optimized, so don't overdo it, but it works.

Looks like a duplicate of this question. Basically, the answer is "you can't" - hoverintent was coded in such a way that any event handler you add is going to overwrite the older one. That thread's answerer takes a couple of stabs at patching hoverintent to add the functionality you're looking for, but it doesn't look like he's managed it yet.

I'm going to try my hand at writing a new version of the plugin; give me a few minutes, and I'll either discover that it's more of a pain than I thought or post a Github link.