3

Estou fazendo um efeito para MENU usando CSS e jQuery.

Problema
O transition funciona do elemento para ele mesmo com ação hover.
O contrário não funciona.

O CSS abaixo faz o seguinte:

Tem um MENU Mobile escondido a esquerda do site. E quando uso uma função jQuery para chamar a classe .showMenu, o MENU corre para a posição left:0. Mas quando clico de volta no botão que executa a função jQuery, o MENU não volta do mesmo jeito que veio - correndo.

O MENU simplesmente some.

// CSS
nav#menu-navigation{
    position:fixed;
    background-color: #FFF;
    width: 80%;
    max-width: 256px;
    height: 70%;
    top: 0;
    left: -400px;
    bottom: 20px;
    margin: auto;
    overflow: auto;
    transition: left 0.3s ease;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    &.show-menu{
        left: 0px;
        z-index: 1;
        transition: left 0.3s ease;
    }
}

// jQuery
$(document).ready(function(){

    $('.open-menu').on('click tap', function(){
        $('nav#menu-navigation, main').toggleClass('show-menu');
    });

});

1 Resposta 1

1

Aparentemente o transition está OK:

$('button').click(function(){
  $('div').toggleClass('show');
});
div {
  position: fixed;
  overflow: auto;
  left: -100px;
  transition: left 0.3s ease;
}
div.show {
  left: 0px;
  transition: left 0.3s ease;
}
button {
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Teste</div>
<button>Toggle</button>


Isso me leva a pensar que talvez o problema seja outro.

Olhando seu CSS, vejo que colocou z-index: 1; no .show-menu. Talvez você tenha colocado isso porque algum outro CSS estivesse mudando ele para 0 e precisou aumentar para 1 para ficar visível. Isso seria uma boa explicação para acontecer o que descreveu.

Então, tente adicionar z-index: 1; direto no nav#menu-navigation.

1
  • 1
    Parece que foi isso mesmo, hein. Eu já tinha corrigido. Coloquei um transition: all .3s ease-in-out no hover e funcionou. Mas para melhorar no desempenho mesmo que mínimo usei sua solução. Commented 1/07/2015 às 18:14

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 .