JQuery fadeIn，fadeOut div

Question

我有一個按鈕（「login_button」）。每次我點擊按鈕我想要一個DIV（「login_cont」）出現。之後，如果我點擊頁面上的其他任何地方，我希望這個DIV再次消失。

這是我的代碼

$(document).ready(function(){ 
$('#login_button').click(function(e){ 
    $('#login_cont').fadeIn(); 
}); 
$(document).click(function(e){ 
    $('#login_cont').fadeOut(); 
}); 
}); 

這對我來說很好（我是新在此）。 但是。每當我點擊按鈕，div就會出現，但隨後也會在不到一秒的時間內消失......爲什麼以及如何修復它？

Answer 1

您可以設置毫秒數，或只是通過調用它衰落的速度「慢」：

$('#login_button').click(function(e){ 
    $('#login_cont').fadeIn(3000); 
    return false; 
}); 

$(document).click(function(e){ 
    $('#login_cont').fadeOut('slow'); 
    return false; 
}); 

更新（上圖）：返回false，以防止默認點擊動作，如果默認的點擊將提交。

Answer 2

停止從傳播的單擊事件，當你點擊登錄按鈕

$(document).ready(function(){ 
      $('#login_button').click(function(event){ 
       event.stopPropagation() 
       $('#login_cont').fadeIn(); 
      }); 

      $(document).click(function(e){ 
       $('#login_cont').fadeOut(); 
      }); 
}); 

Answer 3

這是由於文檔和#login_cont都被點擊（#login_cont是文檔部分）

您可以修復這種通過改變

$(document).click(function(e){ 
       $('#login_cont').fadeOut('slow'); 
      }); 

到

$('#login_cont').onblur(function(e){ 
       $('#login_cont').fadeOut('slow'); 
      }); 

Answer 4

因爲兩個事件在同一時間發射，你需要stopPropagation：

$(document).ready(function(){ 
       $('#login_button').click(function(e){ 
        $('#login_cont').fadeIn(); 
        e.stopPropagation(); 
       }); 

       $(document).click(function(e){ 
        $('#login_cont').fadeOut(); 
       }); 
});