I have created a login layer that slides down from the top of the screen and i want it so that if the mouse leaves the layer or you click outside of the layer it slides back up. I have it working on mouse out but it is buggy and since i am new to this i am sure there is probably a much better way to do what i am doing.
Can someone please take a look and let me know how to do this? $(document).ready(function(){ $("#LoginForm").corner("bottom"); $("#LoginLink").click(function(){ if ($("#LoginForm").is(":hidden")){ $("#LoginForm").slideDown("fast"); } else{ $("#LoginForm").slideUp("fast"); } if ($(".FormContainer").is(":hidden")){ $(".FormContainer").show("fast"); } }); setTimeout('$("#messageReply").hide();$("#LoginForm").slideUp ("fast")', 20000); $("#LoginFormContainer").hover( function() { $("#LoginFormContainer").show(); }, function() { setTimeout('$("#LoginForm").slideUp("fast")', 2000); } ); $(".Content input").focus(function() { $(this).parent().addClass("curFocus") }); $(".Content input").blur(function() { $(this).parent().removeClass("curFocus") }); $("a").mouseover(function() { $(this).fadeOut(100); $(this).fadeIn(300); }); // handle hide/show for text field default values in only one form inputDefaults = {}; $("#LoginForm input:text, #LoginForm input:password").clearDefaultText(); }); function closeForm(){ $("#LoginForm .FormContainer").fadeOut("fast"); setTimeout('$("#messageReply").fadeIn("fast")', 350); setTimeout('$("#messageReply").hide();$ ("#LoginForm").slideUp("fast")', 3500); } // handle hide/show for text field default values in only one form jQuery.fn.clearDefaultText = function() { return this.each(function(){ var element = $(this); inputDefaults[element.attr("id")] = element.val(); element.focus(function() { if (element.val() == inputDefaults[element.attr("id")]) { element.val(''); } }); element.blur(function() { if (element.val() == '') { element.val(inputDefaults[element.attr("id")]); } }); }); } The main problem is with the........................................................ $("#LoginFormContainer").hover( function() { $("#LoginFormContainer").show(); }, function() { setTimeout('$("#LoginForm").slideUp("fast")', 2000); } It seems to work but sometimes it slides up with the mouse over the layer and you never left the layer. Any help would greatly appreciated! :)