Animating login screens I know there is probably a better way to have coded this. Can anyone be of help? I am not an expert JavaScript coder.

$(function() {
    $('#clientLoginText').hover(function() {
        $('#clientLoginBox').stop().animate({ "height" : '80px'}, 700);
    }, function() {
        //$('#clientLoginBox').stop().delay(500).animate({ "height" : '0px'}, 700);
    });
});

$(function() {
    $('#clientLoginBox').hover(function() {
    }, function() {
        $('#clientLoginBox').stop().delay(500).animate({ "height" : '0px'}, 700);
    });
});
Well here is a tidied up version that shouldn't change the functionality at all:

$(function() {
    $('#clientLoginText').mouseenter(function() {
        $('#clientLoginBox').stop().animate({ "height" : '80px'}, 700);
    });

    $('#clientLoginBox').mouseleave(function() {
        $(this).stop().delay(500).animate({ "height" : '0px'}, 700);
    });
});


About the changes:


You only need a single document.ready function: the only good reason I can think of for having two is if you need to put them in separate JS files.
You had used the .hover() function, which is shorthand for .mouseenter() and .mouseleave(), but in the first use you passed an empty function for the mouseleave part and in the second use you passed an empty function for the mouseenter part, so why not just code the first directly as .mouseenter() and the second as .mouseleave()?
Within an event handler you can refer to the element that triggered the event as this, or $(this) if you need it as a jQuery object. More efficient than getting jQuery to find it again from its id.