フェードインは動作しますがフェードアウトはありません

Question

別のページから登録フォームをロードしています。負荷は素晴らしいです。誰かが近くをクリックしてボックスを上に移動させ、霧を消してしまったときに、私は次へしたい。しかし、私はそれが/＃に行くことを止めるべきである戻り値falseでもうまく動作するように思えますが、動作しません。何か案は？

のjQuery

$('.signUpLink').click(function(data) { 

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

     $('#wrap').append(
      $('<section>').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;  
    }); 

HTML

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

</div> 
<div class="fog"></div> 

CSS

.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; 
} 

Answer 1

あなたはおそらく正しい、動的に閉じるボタンをロードしていますか？ .click()イベントは、DOMの後にロードされるため、イベントには添付されません。

$('body').on('click', '.signUpBoxClose', function() { 
    $('.fog').fadeOut(10000); 
    $('.signUpBox').animate({top: 200}, 400); 
    return false;  
}); 

それとも古いjQueryのバージョン用：

$('.signUpBoxClose').live(function() { 
    $('.fog').fadeOut(10000); 
    $('.signUpBox').animate({top: -200}, 400); 
    return false;  
});