All geek questions in one place

Animation without jquery, slide left and right

I am trying to shift the div to the left when I show it, and move it to the right when I hide it, but I don't want to use jQuery. Is there a way to make simple animations and support IE7 and IE8 without using the javascript library?

Here is my show / hide js:

function showHide() { var Elliot = document.getElementById('Daniel').style.display; if (Elliot == "block") { document.getElementById('Daniel').style.display = "none"; } else { document.getElementById('Daniel').style.display = "block"; }; };

HTML will look like this:

 <a href="#" onclick="showHide();return false;">click me</a> <div id="Daniel" style="display:block; width: 300px; height: 50px;"> <!-- some stuff --> </div>
+4
source share
1 answer

Below is a function that can run you:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> #yea { margin-left: 100px; height: 100px; width: 100px; background: blue; border: 1px black solid; } </style> </head> <body> <div id='yea'></div> <input type="button" value="Capacity Chart" onclick="animateMe();" > <script> function animateLeft(obj, from, to){ if(from >= to){ obj.style.visibility = 'hidden'; return; } else { var box = obj; box.style.marginLeft = from + "px"; setTimeout(function(){ animateLeft(obj, from + 1, to); }, 25) } } function animateMe() { animateLeft(document.getElementById('yea'), 100, 700); } </script> </body> </html>

https://jsfiddle.net/geh7ewLx/

+8
source

Source: https://habr.com/ru/post/1499871/

More articles:


All Articles