jQuery将幻灯片动画切换为纯JavaScript动画

Question

See here https://jsfiddle.net/97Lahmoh/ OR http://www.w3schools.com/code/tryit.asp?filename=FB8TE2KSHGZ5

basically I want to use jquery ui toggle slide animation without any jquery and plugins. this is jquery code which does the work.

$( "#effect" ).toggle("slide", {direction: "left"}, 500);

how to use it on pure javascript code? I'm not good at animations.

Answer 1

You can use css transition with position property.

try this one:

 function toggle() { var div1 = document.getElementById("div1"); if (document.getElementsByClassName("hide").length == 0) { div1.className = "test hide"; } else { div1.className = "test show"; } } 

 .test { width: 200px; height: 100px; background-color: #2354A4; transition: left 2s; position: relative; top: 0px; bottom: 0px; right: 0px; } .hide { left: -250px; } .show { left: 0px; } 

 <div id="div1" class="test hide"> </div> <button id="btnToggle" onclick="toggle()" type="button" name="btnToggle">TOGGLE</button> 

Answer 2

You can achive this by using css transition property.

Here is the JSFIDDLE