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>

score 0 · Accepted Answer · answered Mar 31 '17 at 23:49

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>

@OpticLukie that's not necessary, you can use only one function for both fadingIn and fadingOut read about event delegation: https://learn.jquery.com/events/event-delegation/ — Oskar, Apr 01 '17 at 00:19
Ok this works, but I would like to set the width and height to 100% instead of a set size. — Optic Lukie, Apr 01 '17 at 00:52
@OpticLukie That's a separate question, which is answered here: http://stackoverflow.com/questions/1622027/percentage-height-html-5-css I believe I answered your question, why it doesn't fadeIn/fadeOut — Oskar, Apr 01 '17 at 09:51

div is not fading in when button is pressed

1 Answers1