jQuery SlideUp and SlideDown is not working properly

$(document).ready(function(){
  
  $("#signup").click(function(e){
    $("#log").slideUp("slow", function(){
       $("#reg").slideDown("slow");
    });
  });
  
  $("#signin").click(function(e){
    $("#reg").slideUp("slow", function(){
       $("#log").slideDown("slow");
    });
  });
  
});

body{
 margin: 0;
 padding: 0;
}

form {
 text-align: center;
}

.wrapper {
 background: url("../img/bg/note.jpeg");
 background-size: 100%;
 width: 100%;
 height: 100%;
 min-height: 900px;
}

.login_box { 
 position: relative;
 margin-right: auto;
 margin-left: auto;
 top: 7%;
 width: 35%;
 background-color: #ffffff;
 border: 1px solid #EDEDED;
 border-radius: 7px;
 padding: 5px;
 opacity: 0.95;

}

.login_header {
 width: 100%;
 height: 100%;
 background-color: #3498db;
 color: #fff;
 text-align: center;
 border-top-left-radius: 7px;
 border-top-right-radius: 7px;
}

input[type='submit']{
 background-color: #3498db;
 border: 1px solid #3498db;
 border-radius: 3px;
 margin: 5px 0 10px 0;
 padding: 5px 10px 5px 10px;
 color: #2C6C96;
 text-shadow: #7386E2 0.5px 0.5px 0;
 font-size: 100%;
}

input[type='text'],input[type='email'],input[type='password'] {
 border: 1px solid #e5e5e5;
 margin-top: 5px;
 width: 70%;
 height: 35px;
 margin-bottom: 10px;
 padding-left: 5px;
}

input[type='text']:hover,input[type='email']:hover,input[type='password']:hover { 

 border-color: #3498db;
}

a {
 text-decoration: none;
 color: #3498db;
}

#reg {
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log">
 <form action="register.php" method="POST">
  <input type="email" name="log_email" placeholder="Email" required>
  <br>
  <input type="password" name="log_pass" placeholder="Password">
  <br>
  <input type="submit" name="login" value="Login">
  <br>
  <a href="#reg" id="signup" class="signup">Need an account? Register Here!</a>
  <br>
 </form>
 </div>
<br>
 <div id="reg">
 <form action="register.php" method="POST">

 <input type="text" name="reg_fname" placeholder="First Name" required>

 <br> 
 <input type="text" name="reg_lname" placeholder="Last Name" required>

 <br>

 <input type="email" name="reg_email" placeholder="Email" required>


 <br>
 <input type="password" name="reg_pass" placeholder="Password" required>
 <br>
 <input type="password" name="reg_con_pass" placeholder="Confirm password" required>

 <br>
 <input type="submit" name="register" value="Register">
 <br>
 <a href="#log" id="signin" class="signin">Already have an account? Login Here!</a>
 <br>


 </form>
 </div>