jquery mega menu help

Question

Hi. I am developing a mega menu for an ecommerce site. The menu works perfectly if JS is turned off and has some subtle fades and a nice hoverIntent delay when JS is turned on. Everything works perfectly except when you visit the site for the first time or when the menu is not cached. What happens then is as you rollover the btns instead of fading in and out the sub menus in just fades them all in and gets stuck. This happen to each menu element once then it starts working fine.

The link to the menu is -----> http://www.worldwidewholesaler.co.uk/

and my jquery code is:

    function animateIn() {  
        $(this).addClass("current");
        $(this).parent().find("div.subnav").fadeIn(200);
    }

    function animateOut() {
        $(this).parent().hover(function() {
        }, function() {
            $(this).parent().find("div.subnav").fadeOut(200);
            $("#menu li a.link").removeClass("current").stop(true, true);
        });
    }

    $(document).ready(function() {
        $("#menu li a.link").hoverIntent({
            sensitivity: 7, 
            interval: 100, 
            over: animateIn, 
            timeout: 0, 
            out: animateOut
        });
    });

Please can anyone help to explain why it is doing this? Have I missed something obvious here. Many thanks in advance!