Simple Doubt with JQuery, Smooth Effect

Question

Simple Doubt with JQuery, Smooth Effect

Navigation

#1 by (3 votes)

3

I'm having a hard time smoothing out an effect I made. It is very static, after clicking on the link, the goal is to make click after 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><navclass="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>

jquery

asked by anonymous 29.04.2015 / 17:10

1 answer

zoom function in javascript Connecting a local server to an external server with js and php

score 3 · Accepted Answer

You can achieve this effect by changing CSS and using 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><navclass="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>