jQuery .hover causing problems if user is hovering before doc ready

Question

The below code works great except for one condition. If the user is hovering over the element before the doc ready, the slideToggle gets out of sync (or reversed).

So the result is the #logged_in_nav is showing on mouseout and on hover the box disappears. What is a simple method to fix this?

   $("#logged_in_box").hover(function(){
            $("#logged_in_nav").stop(true, true).slideToggle("fast");
            $(this).addClass("logged_in_box_hover");
        }, // hover over
        function() {
            $("#logged_in_nav").stop(true, true).slideToggle("fast");
            $(this).removeClass("logged_in_box_hover");
        } // hover out
    ); // hover

Answer 1

Don't use slideToggle. Use slideDown()^(docs) and slideUp()^(docs) instead so the direction is explicitly tied to the event type.

$("#logged_in_box").hover(function(){
        $("#logged_in_nav").stop(true, true).slideDown("fast");
        $(this).addClass("logged_in_box_hover");
    }, // hover over
    function() {
        $("#logged_in_nav").stop(true, true).slideUp("fast");
        $(this).removeClass("logged_in_box_hover");
    } // hover out
); // hover