how to convert jquery hide/show+animation to javascript?
http://stackoverflow.com/questions/35263603/how-to-convert-jquery-hide-showanimation-to-javascript
HTML
<button class="toggleMenu">Open Menu</button>
<div id="menu" class="menu_closed">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
CSS
#menu {
overflow: hidden;
}
#menu.menu_closed {}
JavaScript
/* $("#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);
}
});
*/
(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...