There's no reason to separate the mouseenter and mouseleave jQuery events into different calls. Since it's the same element, just use:
$(function() {
$('#clientLoginBox').mouseenter(function() {
$(this).stop().animate({"height": '80px'}, 700);
}).mouseleave(function() {
$(this).stop().delay(500).animate({"height": '0px'}, 700);
});
});
It's not that big of a deal to have them separate, but it is an extra call to select the element. Combining them the way directly above makes use of chaining supported in jQuery.
If you wanted to keep them physically separate but not need two calls, you could use:
$(function() {
var the_box = $('#clientLoginBox').mouseenter(function() {
$(this).stop().animate({"height": '80px'}, 700);
});
the_box.mouseleave(function() {
$(this).stop().delay(500).animate({"height": '0px'}, 700);
});
});
Since you want to handle both events, I think using .hover makes more sense, just combine them better:
$(function() {
$('#clientLoginBox').hover(function() {
$(this).stop().animate({"height": '80px'}, 700);
}, function() {
$(this).stop().delay(500).animate({"height": '0px'}, 700);
});
});
.hover() is just a shortcut for binding mouseenter and mouseleave in that order. If you wanted to only bind mouseenter, you could pass a single function to .hover().