Simple doubt with Jquery, smooth effect

Question

I’m having a hard time smoothing out an effect I did. It is very static, after clicking on the link, the goal is to make after the click between the menu screen in a smooth way... from opacity 0 to 1.

Below I’ll leave the code working:

$(document).ready(function() {
  $(".btn-nav").click(function() {
    $(".nav ul").toggleClass('nav-show');
  });
});

.nav ul {
  display: none;
}

.nav-show {
  display: block !important;
  position: fixed;
  left: 0;
  top: 0;
  background: #066;
  width: 100%;
  height: 100%;
  z-index: 99999;
  opacity: 1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<nav class="nav">
  <a href="#" class="btn-nav">Clique aqui para Abrir</a>
  <ul>
    <a href="#" class="btn-nav">Clique aqui para Fechar</a>
    <li><a href="#">Contato</a>
    </li>
    <li><a href="#">Edição Atual</a>
    </li>
  </ul>
</nav>

Answer 1

You can get this effect by changing the CSS and using the fadeToggle:

$(document).ready(function(){
	$(".btn-nav").click(function(){        
		$(".nav ul").fadeToggle("slow", "linear");
	});
});

.nav ul {
  display: none;
}
.nav-show {
  
  position: fixed;
  left: 0;
  top: 0;
  background: #066;
  width: 100%;
  height: 100%;
  z-index: 99999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
<a href="#" class="btn-nav">Clique aqui para Abrir</a>
	<ul class="nav-show">
        <a href="#" class="btn-nav">Clique aqui para Fechar</a>
        <li><a href="#">Contato</a></li>
        <li><a href="#">Edição Atual</a></li>
    </ul>
</nav>