Question

So I have a div that is automatically set to display none on page load. When a particular link is clicked it should be displayed with fadeIn ‘slow’ and vice versa for fadeOut.

fadeIn works the first time it’s clicked after an http request, but fadeOut doesn’t (does close however).
After the first time the whole fade effect doesn’t work at all. It then behaves as if it were hide() and show()

The code:

$('#req_login, #srch_login').click(function() {
    $('#popbox, #popbox_bg').show(0); // opacity background
    $('#popbox #container').fadeIn('slow'); // actual div with content
    $("#email_alt_lgn").focus(); // first field in form

    // 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'); // actual div with content
    $('#popbox, #popbox_bg').hide(0); // opacity background
});

HTML:

// this is the part that 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="Sluiten of [Esc]">X</a></span>
            (... form content omitted)
        </form>
    </div>
</div>
<div id="popbox_bg" style="display: none;"></div>

// this is what should trigger the fadeIn() event
<a id="req_login">Inloggen</a><span class="pin_split_white"></span>

Answer 1

I think your problem is this line : $('#popbox, #popbox_bg').hide(0); **// opacity background** in the “close” click handler.

The issue is that the hide() method will be called immediately after the fadeOut() is called (before the fadeOut has completed). Remove that and see if it works.

Sorry if this doesn’t solve it, but without a fiddle this is the best I can do for you.

Good Luck 🙂