Fade in works but fade out does not
<p>I am loading a registration form from another page. The load works great. I want to next when someone clicks close to move the box up and fade out the fog. However I cant seem to get it to work even the return false which should stop it from going to /# does not work. Any ideas?</p>

<p>Jquery</p>

<pre><code>    $('.signUpLink').click(function(data) {

        var url = $(this).attr('href');

        $( '#wrap' ).append(
            $( '&lt;section&gt;' ).load( url , function () {
                $('.fog').fadeIn('10000');
                $('.signUpBox').animate({top: '200px'}, 400);
                })
        );

        data.preventDefault();

    });

    $('.signUpBoxClose').click(function() {
        $('.fog').fadeOut('10000');
        $('.signUpBox').animate({top: '-200px'}, 400);
        return false;       
    });
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="signUpBox"&gt;
    &lt;form action="http://localhost:8888/splooth/index.php/register" method="post" accept-charset="utf-8"&gt;
        &lt;input type="text" name="username" value="" placeholder="Username"  /&gt;
        &lt;input type="text" name="Email" value="" placeholder="Email Address"  /&gt;
        &lt;input type="password" name="username" value="" placeholder="Password"  /&gt;
        &lt;input type="submit" name="submit" value="Login"  /&gt;
    &lt;/form&gt;
    &lt;a class="signUpBoxClose" href="#"&gt;Close&lt;/a&gt;

&lt;/div&gt;
&lt;div class="fog"&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.signUpBox {
    position: absolute;
    top: -1000px;
    left:50%;
    margin-left:-480px;
    width: 960px;
    border: 2px solid black;
    z-index: 25;
}

.signUpBoxClose {
    position: absolute;
    top: 0;
    right: 0;
}

.fog {
    position: fixed;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,.25);
    z-index: 24;
    display: none;
    top: 0;
    left: 0;
}
</code></pre>
