Skip to main content
adicionou 922 caracteres ao conteúdo; tags editadas
Fonte Link
Renan Gomes
  • 19,3mil
  • 8
  • 54
  • 114

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 um link para vocês verem o código funcionando.:

http://jsfiddle.net/ofo4kaqu/1/

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

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 um link para vocês verem o código funcionando.

http://jsfiddle.net/ofo4kaqu/1/

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>

Fonte Link
Ursones
  • 494
  • 5
  • 28

Dúvida simples com JQuery, suavizar efeito

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 um link para vocês verem o código funcionando.

http://jsfiddle.net/ofo4kaqu/1/