stackoom
  简体   繁体   中英

How can I make a div fade out when it is clicked?

 原文  2017-03-30 02:33:17  0   2    javascript/ html/ css/ button/ fade

Question

So basically I have a button and when the user clicks it, a div fades in. I would like it to fade out when the user clicks anywhere on the div. (the div takes up the entire screen)

Here is what I have so far, it basically just fades in the div when you click the "about" button. I need it to fade out whenever I click anywhere on the screen. 

 $(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>

2 answers

solution1
 0 ACCPTED  2017-03-30 02:36:22

Add a click listener to the body content you just faded in, and then fade it out! 

 $(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>

solution2
 0  2017-03-30 02:37:34

Just hookup the fadeOut into the click event when you are calling fadeIn . 

$('#fadeContent').click(function(){
    $('#bodyContent').click(function() { 
       $(this).fadeOut(500); 
    }).fadeIn(500);
});

EDIT

The code above will keeping connecting the event handler every time you click the button. On the assumption that all your buttons will load and show content and clicking the content should always return to the buttons consider; 

var $content = $('#bodyContent');
$('body').on('click','button', function() {
    $content.fadeIn(500);
});
$content.on('click', function() {
   $content.fadeOut(500);
});

You can then attach click events for the individual buttons to retrieve and assign the specific content into #bodyContent without also having to hook in the fadeIn/fadeOut.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question I can make an div fade in onclick, but how do i make it fade out? How can I make an element fade out when a particluar percentage of a div is scrolled to? How to disable a fade in/out div when a link is clicked Fade In/out div elements when a # anchor is clicked How can I make a div slowly slide out (with CSS' transition property) when a specific button is clicked? How to make ul button text fade in and out when 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 can i make clone fade in and fade out on click of image? How can I make div not disappear when buttons are clicked How would i make the content of these tabs fade in when the tab is clicked?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM