I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.

I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.

I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.

var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");

button.onclick = function(){

  if(content.className == "open"){
    content.className = "";
    content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
    {duration: 1500, fill:'forwards'})
  } else{
    content.className = "open";
  }
};

#navBtn

#mobileLinks {
  display: none
}

#mobileLinks.open {
  display: flex;
}

I have this page with menu-link (#navBtn), and #mobileLinks div that opens and closes when clicking #navBtn.

I would like to add fade-in animation when #mobileLinks div is opened, and fade-out animation when the #mobileLinks div is closed. I would like to achieve this with pure JavaScript.

I managed to insert the fade-in animation already, but don't know how to add the fade-out animation as well.

var content = document.getElementById("mobileLinks");
var button = document.getElementById("navBtn");

button.onclick = function(){

  if(content.className == "open"){
    content.className = "";
    content.animate([{opacity:'0.0'}, {opacity:'1.0'}],
    {duration: 1500, fill:'forwards'})
  } else{
    content.className = "open";
  }
};

#navBtn

#mobileLinks {
  display: none
}

#mobileLinks.open {
  display: flex;
}

• javascript
• html
• css

• 1 you can do with css... Do you required use js? also ass html – לבני מלכה Commented Apr 11, 2019 at 11:09
• Try to plete the snippet. – ceving Commented Apr 11, 2019 at 11:15
• Why don't you just add a class on click and use a css transition on opacity? – nanobar Commented Apr 11, 2019 at 11:28

3 Answers 3

You can handle the styles entirely in CSS, and only toggle a class with Js.

With CSS & Js

const menu = document.getElementById("menu")

function toggleMenu() {
  menu.classList.toggle("isOpen");
}

#menu {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

#menu.isOpen {
  opacity: 1;
}

<a onClick="toggleMenu()">menu</a>

<nav id="menu">
  <a>link</a>
  <a>link</a>
</nav>

Or with JS only

const menu = document.getElementById("menu")

menu.style.opacity = '0'
menu.style.transition = "opacity 0.2s ease-out"

function toggleMenu() {
  // Toggle between 0 and 1
  menu.style.opacity ^= 1;
}

<a onClick="toggleMenu()">menu</a>

<nav id="menu">
  <a>link</a>
  <a>link</a>
</nav>

You can achieve it using jquery effect

To show your element, use fadeIn() and to hide an element, you can use fadeOut()

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut();
    $("#div3").fadeToggle();

  });
});
</script>

You can do it with JS. You can change the opacity of the element to hide it and along with css transition property to make fade effect

var container = document.getElementById("container")

function clicked() {
  if (container.style.opacity == 0) {
    container.style.opacity = 1
  }
  else {
    container.style.opacity = 0
  }
}

#container {
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

<div id="container">Some Text</div>
<a href="#" onclick="clicked()">Submit</a>