How to Transition in Hover

Question

I’m making an effect for MENU using CSS and jQuery.

Problem
The transition works from the element to itself with action hover.
Otherwise it doesn’t work.

The CSS below does the following:

There is a Mobile MENU hidden to the left of the site. And when I use a jQuery function to call the class .showMenu, MENU runs to position left:0. But when I click back on the button that performs the jQuery function, the MENU does not come back the way it came - running.

THE MENU SIMPLY DISAPPEARS.

// 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');
    });

});

Answer 1

Apparently Transition is 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>

---

This leads me to think that maybe the problem is another.

Looking at your CSS, I see you put z-index: 1; in the .show-menu. Maybe you put this because some other CSS was changing it to 0 and needed to increase to 1 to be visible. That would be a good explanation to happen what you described.

So try to add z-index: 1; right in the nav#menu-navigation.