CODEWITHSUNDEEP
javascriptjquerycssjquery-animatecss-transitions
Jake Xia
Jake Xia

Reputation: 81

How to transition to "hidden" in javascript and css when toggling

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>

Upvotes: 0

Views: 86

Answers (3)

TimoStaudinger
TimoStaudinger

Reputation: 42460

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>

Upvotes: 1

kockburn
kockburn

Reputation: 17616

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)

Upvotes: 0

Yuvraj Mudaliar
Yuvraj Mudaliar

Reputation: 375

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>

Upvotes: 1

Related Questions