fadein - 登录表单淡入/淡出

Question

参考图片https://dl.dropboxusercontent.com/u/36614618/Doubts/Signin.jpg

我有个问题。默认情况下，上图中的表单将被隐藏。当我点击登录按钮（右上角）。下面的表格应该会显示出来。当我再次单击登录按钮（右上角）或表单外时。下面的表格应该隐藏起来。

上面的概念是有效的，但问题是当我点击 Signin Btn 时，表单被打开，但是当我在表单内部点击时，表单被隐藏。

//直到现在我的代码如下：

$('#signInFormDiv').hide(); //default form is hide.

$('#signInBtn').click(function(){ //when clicked on signin, form get displayed
$('#signInFormDiv').fadeToggle('fast');
return false;
});

$(':not(#signInBtn)').click(function(){ //when clicked on document, form get hide.
$('#signInFormDiv').fadeOut('fast');
});

Answer 1

您会使用标志来检查您是否在登录表单中吗？

var imOnsignIn = false;

$('#signInFormDiv').hide(); //default form is hide.
$('#signInFormDiv').hover(function(){ 
    imOnsignIn = true;  //I'm on the sign in form
}, function(){ 
    imOnsignIn = false; //I'm out...
});

$('#signInBtn').click(function(){ //when clicked on signin, form get displayed
    $('#signInFormDiv').fadeToggle('fast');
    return false;
});

$(':not(#signInBtn)').click(function(){ //when clicked on document, form get hide.
   if (!imOnsignIn){
      $('#signInFormDiv').fadeOut('fast');
   }
});