div is not fading in when button is pressed

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>

Solution

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>