When a specific link is clicked, I want a div to display with a fadeIn effect and then fadeOut when the link is clicked again. However, after the first click following an HTTP request, the fadeIn works but the fadeOut does not (the div closes though). Moreover, after the initial click, the fade effect stops working entirely and the div behaves as if it is being hidden and shown directly.
This is the code snippet:
$('#req_login, #srch_login').click(function() {
$('#popbox, #popbox_bg').show(0); // backdrop opacity
$('#popbox #container').fadeIn('slow'); // content div
$("#email_alt_lgn").focus(); // focus on the first form field
// close popbox with escape key
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('#popbox_close').click(); // trigger close link
}
});
});
$('#popbox_close').click(function() {
$('#popbox #container').fadeOut('slow'); // content div fadeOut
$('#popbox, #popbox_bg').hide(0); // backdrop opacity hide
});
HTML:
// The following part should fadeIn() and fadeOut()
<div id="popbox" style="display: none;">
<div id="container">
<form method="POST" action="" name="login_form">
<span style="float: right;"><a id="popbox_close" class="button makeCircle" title="Close or [Esc]">X</a></span>
(... form content omitted)
</form>
</div>
</div>
<div id="popbox_bg" style="display: none;"></div>
// The following should trigger the fadeIn() event
<a id="req_login">Log In</a><span class="pin_split_white"></span>