[jQuery] Show hide layer on hover problem
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! :)