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

The below co开发者_运维技巧de 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

---

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