3

Estou com dificuldades para suavizar um efeito que fiz. Ele está muito estático, após clicar no link, o objetivo é fazer com que após o clique entre a tela de menu de uma forma suave... da opacidade 0 ao 1.

Abaixo vou deixar o código funcionando:

$(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>

1 Resposta 1

3

Você pode obter esse efeito alterando o CSS e usando o 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>

1
  • Obrigado amigo, eu desconhecia esse método usando 'fadeToggle'
    – Ursones
    Commented 29/04/2015 às 18:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .