淡入淡出而不淡出

我從另一頁加載註冊表單。負載效果很好。我想接下來當有人點擊關閉移動框並淡出霧。然而，我似乎無法讓它工作，即使返回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; 
}

來源

2012-03-03 Claremont

在控制檯上的任何錯誤？如果您在點擊處理程序中進行調試或發出警報，它會執行嗎？ – 2012-03-03 20:15:57

你可能會動態加載的關閉按鈕，對不對？ .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;  
});

來源

2012-03-03 20:16:40 Blender

ahhh是的工作表示感謝。 – Claremont 2012-03-03 20:52:25

淡入淡出而不淡出

回答

相關問題