How to transition to “hidden” in javascript and css when toggling

Question

I'm trying to make a div appear when a certain button is pressed and have it toggle between the class .hidden (which hides the div). I've tried to animate this by adding a transition but for some reason the fact that it's being hidden somehow disrupts that. In short, I want to know if there is a way to animate the transition between hidden and visible states.

 var main = function() { $("#myMenu").css("height", window.innerHeight); $("#myMenu").css("width", window.innerWidth); } $(document).ready(main); 

 .toggle { font-size: 20px; margin: 20px; margin-top: 30px; display: block; position: fixed; top: 0; right: 0; z-index: 100; } .hidden { visibility: none; display: none; } .menu { background-color: red; position: fixed; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--contains hamburger--> <div class="toggle"> <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a> </div> <!--actual mobile menu--> <div id="myMenu" class="menu hidden"> <ul> <li><a onclick="toggleNav()">Home</a> </li> <li><a onclick="toggleNav()">Events</a> </li> <li><a onclick="toggleNav()">About</a> </li> <li><a onclick="toggleNav()">Volunteer</a> </li> <li><a onclick="toggleNav()">Contact</a> </li> </ul> </div> <script> function toggleNav() { $("#myMenu").toggleClass("hidden"); if ($("#myMenu").hasClass("hidden")) { $("#tButton").text(String.fromCharCode(9776)); } else { $("#tButton").text(String.fromCharCode(10005)); } } </script> 

Answer 1

Try this out.

if ($("#myMenu").hasClass("hidden")) {
      $("#tButton").text(String.fromCharCode(9776));

       $("#myMenu").fadeIn()
        $("#myMenu").removeClass('hidden');
    } else {
      $("#myMenu").addClass('hidden');
         $("#myMenu").fadeOut();
      $("#tButton").text(String.fromCharCode(10005));
    }

Full Demo

 var main = function() { $("#myMenu").css("height", window.innerHeight); $("#myMenu").css("width", window.innerWidth); } $(document).ready(main); 

 .toggle { font-size: 20px; margin: 20px; margin-top: 30px; display: block; position: fixed; top: 0; right: 0; z-index: 100; } .hidden { visibility: none; display: none; } .menu { background-color: red; position: fixed; top: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!--contains hamburger--> <div class="toggle"> <a id="tButton" href="javascript:void(0);" onclick="toggleNav()">&#9776;</a> </div> <!--actual mobile menu--> <div id="myMenu" class="menu hidden"> <ul> <li><a onclick="toggleNav()">Home</a> </li> <li><a onclick="toggleNav()">Events</a> </li> <li><a onclick="toggleNav()">About</a> </li> <li><a onclick="toggleNav()">Volunteer</a> </li> <li><a onclick="toggleNav()">Contact</a> </li> </ul> </div> <script> function toggleNav() { if ($("#myMenu").hasClass("hidden")) { $("#tButton").text(String.fromCharCode(9776)); $("#myMenu").fadeIn(); $("#myMenu").removeClass('hidden'); } else { $("#myMenu").addClass('hidden'); $("#myMenu").fadeOut(); $("#tButton").text(String.fromCharCode(10005)); } } </script> 

Answer 2

Since you are already using jQuery, you can let the library do the heavy lifting for you.

fadeIn() , fadeOut() and fadeToggle() will help you:

 $('#my-div').hide(); function show() { $('#my-div').fadeToggle(); } 

 #my-div { width: 100px; height: 100px; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick='show()'>Toggle</button> <div id='my-div'></div> 

Answer 3

You're using jQuery but for some reason, you're trying to do it manually. You have multiple jQuery functions that do that for you.

$("#myMenu").toggle();

This alone will hide and show your element with a default animation. You can customize it further with at http://api.jquery.com/toggle/

You also have other methods such as fadeToggle (or individually with fadeIn and fadeOut ) and slideToggle methods you can use. Including the hide and show method.. that either hide or show your element... (so no need for a .hidden css class)