Как преобразовать jquery hide/show + animation в javascript?

Question

Я хочу создать меню левой стороны.

Я хочу открыть и закрыть его кнопкой.

В настоящее время я использую этот Jquery код:

<script> 
    $("#openMenu").click(function() { 

    var menu = $("#menu"); 
    if ($(menu).is(":visible")) { 
     $(menu).animate({width: 0}, 1000, function() {$(menu).hide();}); 
    } else { 
     $(menu).show().animate({width: 200}, 1000);   
    } 
}); 
    </script> 

, как я могу сделать это с чистым JavaScript?

Answer 1

Как говорит Гомзи, вы можете просто использовать свойство отображения css, чтобы скрыть меню.

Однако, если вы хотите, чтобы оживить его вам нужно будет что-то вроде этого:

(function() { 
    var menu = { 
     //Node is the menu container we wish to manipulate 
     node : document.getElementById("menu"), 
     //Is the menu open? 
     open : false, 
     //A handle for our interval 
     interval : null, 
     //How wide is the open menu? 
     openWidth : 200, 
     //How many pixels should we open/close with per frame? (speed of transition is determined here) 
     pixelPerFrame : 10, 
     //Load elements that has the "toggleMenu" class and bind a "onclick" event to them 
     init : function() { 
      //Self refer so we dont get confused when handling events 
      var self = this; 
      //Fetching elements 
      var togglers = document.getElementsByClassName("toggleMenu"); 
      //Looping through the elements 
      for (var a of togglers) { 
       //Bind event 
       a.onclick = function (e) { 
        //Here we need the "self" variable 
        self.toggle(); 
       } 
      } 
     }, 
     //Open/close the menu 
     toggle : function() { 
      //Self refer so we dont get confused when handling events 
      var self = this; 
      //If the menu doesn't yet have a width modifier, we assume the menu is open 
      if (self.node.style.width == "") { 
       self.node.style.width = self.openWidth + "px"; 
       self.open = true; 
      } 
      //Revert menu direction. Closes when the menu was open and opens if the menu was closed 
      self.open = !self.open; 
      //Clear any previous menus 
      clearInterval(self.interval); 
      //Setup the interval function 
      self.interval = setInterval(function() { 
       //If the menu is opening 
       if (self.open) { 
        //Add the "pixelPerFrame" width to the current width of the menu 
        self.node.style.width = parseInt(parseInt(self.node.style.width.split("px")) + self.pixelPerFrame) + "px"; 
        //If menu is as wide or wider than "openWidth", we set the width to "openWidth" and clears the interval 
        if (parseInt(self.node.style.width.split("px")) >= self.openWidth) { 
         self.node.style.width = self.openWith + "px"; 
         clearInterval(self.interval); 
        } 
       //If the menu is closing 
       } else { 
        //Subtracts the "pixelPerFrame" width from the current width of the menu 
        self.node.style.width = parseInt(parseInt(self.node.style.width.split("px")) - self.pixelPerFrame) + "px"; 
        //If menu is smaller than or equal to 0 pixels, we set the width to "0px" and clears the interval 
        if (parseInt(self.node.style.width.split("px")) <= 0) { 
         self.node.style.width = "0px"; 
         clearInterval(self.interval); 
        } 
       } 
      }, 1000/60); 
     } 
    } 
    //Runs init 
    menu.init(); 
})(); 

https://jsfiddle.net/g23zr90b/

Существуют ли какие-либо конкретные причины, почему вы не хотите использовать JQuery?