[英]How can I make a div fade out when it is clicked?
所以基本上我有一個按鈕，當用戶單擊它時，div會淡入。當用戶單擊div上的任意位置時，我希望它會淡出。 （div占據了整個屏幕）
這是我到目前為止的內容，當您單擊“關於”按鈕時，它基本上只是在div中消失。 每當我單擊屏幕上的任意位置時，我都需要淡出它。
$(function() { $('#fadeContent').click(function(){ $('#bodyContent').fadeIn(500); }); });
body { background-color: black; font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color:black; } #bodyContent{ display:none; position:absolute; top:0; left;0; width:100%; height:100%; background:#454545; z-index: 100; } #home { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 20%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .about { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 37%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } #projects { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 54%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } #contact { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 71%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } #home:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } #about:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } #projects:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } #contact:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel='stylesheet prefetch' href='http://rawgit.com/fralec/elegantShareJS/master/css/elegant.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <button id="home">Home</button> <button id="fadeContent" class="about">About</button> <button id="projects">Projects</button> <button id="contact">Contact</button> <div id="bodyContent"> <h1>Page</h1> <p>Content</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script type="text/javascript" src="js/elegant.js"></script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>
在剛剛淡入的正文內容中添加一個單擊偵聽器，然后淡出它！
$(function() { $('#fadeContent').click(function(){ var bodyContent = $('#bodyContent') bodyContent.fadeIn(500); bodyContent.click(function() { $(this).fadeOut(500); }) }); });
body { background-color: black; font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color:black; } #bodyContent{ display:none; position:absolute; top:0; left;0; width:100%; height:100%; background:#454545; z-index: 100; } #home { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 20%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } .about { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 37%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } #projects { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 54%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } #contact { position: absolute; width: 16%; background-color: transparent; border: 2px solid #FFF; margin-top: 12%; margin-left: 71%; height: 3em; color: #FFF; font-size: 1em; cursor: pointer; text-transform: uppercase; border-radius: 4px; animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ } #home:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } #about:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } #projects:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } #contact:hover { color: #1dd2e2; border: 3px solid #18bdef; font-weight: bold; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Home</title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel='stylesheet prefetch' href='http://rawgit.com/fralec/elegantShareJS/master/css/elegant.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <button id="home">Home</button> <button id="fadeContent" class="about">About</button> <button id="projects">Projects</button> <button id="contact">Contact</button> <div id="bodyContent"> <h1>Page</h1> <p>Content</p> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script type="text/javascript" src="js/elegant.js"></script> <script type="text/javascript" src="js/transition.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>
在調用fadeIn時，只需將fadeOut連接到click事件中fadeIn 。
$('#fadeContent').click(function(){
$('#bodyContent').click(function() {
$(this).fadeOut(500);
}).fadeIn(500);
});
編輯
上面的代碼將在您每次單擊按鈕時保持連接事件處理程序的狀態。 假設所有按鈕都將加載並顯示內容，並且單擊內容應始終返回到按鈕，請考慮；
var $content = $('#bodyContent');
$('body').on('click','button', function() {
$content.fadeIn(500);
});
$content.on('click', function() {
$content.fadeOut(500);
});
然后，您可以為各個按鈕附加單擊事件，以檢索特定內容並將其分配給#bodyContent而不必掛入fadeIn / fadeOut。
我可以讓 onclick 中的 div 淡出，但如何讓它淡出？
[英]I can make an div fade in onclick, but how do i make it fade out?
當滾動到特定百分比的 div 時，如何使元素淡出？
[英]How can I make an element fade out when a particluar percentage of a div is scrolled to?
單擊特定按鈕時，如何使 div 緩慢滑出（使用 CSS 的轉換屬性）？
[英]How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked?
單擊菜單時，如何根據顯示的菜單淡入和淡出兩個無序列表？
[英]How do I make two unordered list fade in and fade out when my menu is clicked depending on which is showing?
單擊選項卡時，如何使這些選項卡的內容淡入？
[英]How would i make the content of these tabs fade in when the tab is clicked?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.