div is not fading in when button is pressed
Question
So basically I have some javascript that should fadein a page whenever a user clicks a button. But it isn't working for some reason. It is also supposed to fade out when you click anywhere on the div. Any ideas on what is wrong?
//Menu function expand(){ $(this).toggleClass("on"); $(".menu").toggleClass("active"); }; $(".button").on('click', expand); //Page transition $(function() { $('#about').click(function() { var bodyContent = $('#aboutContent') bodyContent.fadeIn(400); bodyContent.click(function(e) { if($(e.target).hasClass('fa-times')) { $(this).fadeOut(400); } else if(!$(e.target).hasClass('fa')) { $(this).fadeOut(400); } }) }); $('#projects').click(function() { var bodyContent = $('#projectsContent') bodyContent.fadeIn(400); bodyContent.click(function(e) { if($(e.target).hasClass('fa-times')) { $(this).fadeOut(400); } else if(!$(e.target).hasClass('fa')) { $(this).fadeOut(400); } }) }); $('#contact').click(function() { var bodyContent = $('#contactContent') bodyContent.fadeIn(400); bodyContent.click(function(e) { if($(e.target).hasClass('fa-times')) { $(this).fadeOut(400); } else if(!$(e.target).hasClass('fa')) { $(this).fadeOut(400); } }) }); });
body { background-color: black; font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color:black; overflow: hidden; } #aboutContent { width: 100%; height: 100%; background-color: #393939; z-index: 1000; } #projectsContent { width: 100%; height: 100%; background-color: #393939; z-index: 100; } #contactContent { width: 100%; height: 100%; background-color: #393939; z-index: 100; } .menu { position: absolute; top: 0; left: 0; bottom: 0; padding: 0; overflow: hidden; background: rgba(25, 25, 25, .5); width: 18%; box-sizing: border-box; transition: all 250ms; -webkit-transform: translateZ(0) translateX(-100%); transform: translateZ(0) translateX(-100%); text-align:center; box-shadow: 0 0 20px #000000; } .active { transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); -webkit-transition: 0.4s; transition: 0.4s; } h1 { margin-top:60%; font-size: 2.5em; cursor: default; } ul { padding:0; list-style:none; font-size:14px; } li { padding:10px 10px; } a { text-decoration:none; padding:10px 15px; color:#fff; font-family:"Roboto"; font-size: 1.5em; font-weight: 300; } a:hover { text-decoration: line-through; color: aqua; } .content { position:relative; width:300px; } .button { width:50px; height:50px; margin:24% 36%; padding: 10px; cursor:pointer; } .line { width: 40px; height: 2px; background-color:#fff; transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .line.first { transform: translateX(-10px) translateY(22px) rotate(-90deg); } .line.second { transform: translateX(-10px) translateY(19px) rotate(0deg); } .button.on .line.top { width: 40px; transform: translateX(-10px) translateY(20px) rotate(45deg); } .button.on .line.bottom { width: 40px; transform: translateX(-10px) translateY(17px)rotate(-45deg); } @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|Raleway" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="wrapper"> <div class="menu"> <h1>AL-SABA</h1> <ul> <div id="home"><li><a href="#home"><i class="fa fa-home"></i> home</a></li></div> <div id="about"><li><a href="#about"><i class="fa fa-user"></i> about</a></li></div> <div id="projects"><li><a href="#projects"><i class="fa fa-code"></i> projects</a></li></div> <div id="contact"><li><a href="#contact"><i class="fa fa-paper-plane"></i> contact</a></li></div> </ul> </div> <div class="content"> <div class="button"> <div class="line first top"></div> <div class="line second bottom"></div> </div> </div> <div id="aboutContent"> </div> <div id="projectsContent"> </div> <div id="contactContent"> </div> </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/transition.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>
1 answers
solution1
0 ACCPTED 2017-03-31 23:49:52
First of all your content elements have width and height set to 100%, you need a parent element with fixed dimensions to grab percentage values from.
Another mistake which you made is adding click handlers when you open your menu. It leads to memory leaks as you will add new handlers over and over when your menu is opened.
To fade in, your element has to be invisible first.
I fixed the about button for you, the rest of them you can do in the same way.
//Menu function expand() { $(this).toggleClass("on"); $(".menu").toggleClass("active"); }; $(".button").on('click', expand); //Page transition $(function() { var bodyContent = $('#aboutContent') bodyContent.click(function(e) { if ($(e.target).hasClass('fa-times')) { $(this).fadeOut(400); } else if (!$(e.target).hasClass('fa')) { $(this).fadeOut(400); } }); $('#about').click(function(ev) { bodyContent.fadeIn(400); }); });
body { background-color: black; font-family: "Source Sans Pro", sans-serif; color: #ccc; z-index: -100; background-color: black; overflow: hidden; } #aboutContent { width: 1000px; height: 1000px; background-color: #393939; z-index: 1000; display: none; } #projectsContent { width: 100%; height: 100%; background-color: #393939; z-index: 100; } #contactContent { width: 100%; height: 100%; background-color: #393939; z-index: 100; } .menu { position: absolute; top: 0; left: 0; bottom: 0; padding: 0; overflow: hidden; background: rgba(25, 25, 25, .5); width: 18%; box-sizing: border-box; transition: all 250ms; -webkit-transform: translateZ(0) translateX(-100%); transform: translateZ(0) translateX(-100%); text-align: center; box-shadow: 0 0 20px #000000; } .active { transform: translateZ(0) translateX(0); transform: translateZ(0) translateX(0); -webkit-transition: 0.4s; transition: 0.4s; } h1 { margin-top: 60%; font-size: 2.5em; cursor: default; } ul { padding: 0; list-style: none; font-size: 14px; } li { padding: 10px 10px; } a { text-decoration: none; padding: 10px 15px; color: #fff; font-family: "Roboto"; font-size: 1.5em; font-weight: 300; } a:hover { text-decoration: line-through; color: aqua; } .content { position: relative; width: 300px; } .button { width: 50px; height: 50px; margin: 24% 36%; padding: 10px; cursor: pointer; } .line { width: 40px; height: 2px; background-color: #fff; transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .line.first { transform: translateX(-10px) translateY(22px) rotate(-90deg); } .line.second { transform: translateX(-10px) translateY(19px) rotate(0deg); } .button.on .line.top { width: 40px; transform: translateX(-10px) translateY(20px) rotate(45deg); } .button.on .line.bottom { width: 40px; transform: translateX(-10px) translateY(17px)rotate(-45deg); } @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|Raleway" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="wrapper"> <div class="menu"> <h1>AL-SABA</h1> <ul> <div id="home"> <li><a href="#home"><i class="fa fa-home"></i> home</a></li> </div> <div id="about"> <li><a href="#about"><i class="fa fa-user"></i> about</a></li> </div> <div id="projects"> <li><a href="#projects"><i class="fa fa-code"></i> projects</a></li> </div> <div id="contact"> <li><a href="#contact"><i class="fa fa-paper-plane"></i> contact</a></li> </div> </ul> </div> <div class="content"> <div class="button"> <div class="line first top"></div> <div class="line second bottom"></div> </div> </div> <div id="aboutContent"> </div> <div id="projectsContent"> </div> <div id="contactContent"> </div> </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/transition.js"></script> <script type="text/javascript" src="js/background.js"></script> </body> </html>
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
Accessing a div a button is wrapped in when button is pressed
Drop down div when a button is pressed
Refresh div content with Javascript when button is pressed
change backgroung colour of div when button is pressed
Show next div when button pressed
Hide the div when the submit button is pressed
How to display contents of div instead of value when a button is pressed?
Get form that is inside of multiples div, when a button is pressed
Getting tables div content when pressed button into input
javascript - remove element from div when button inside is pressed
Related Tags