jquery toggle slide animation to pure javascript animation

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.

why you convert to javascript any reason behind on this question? — Sudharsan S
– Sudharsan S, Commented Dec 29, 2016 at 10:13
I want to use jquery ui toggle slide animation without any jquery and plugins you can't use jquery without jquery — Jaromanda X
– Jaromanda X, Commented Dec 29, 2016 at 10:14
Can anyone convert it to pure javascript animation? - yes, you'd have to ask a programmer to do it for you - don't ask on SO for a programmer to do it for you — Jaromanda X
– Jaromanda X, Commented Dec 29, 2016 at 10:15
what I want is pure javascript animation without jquery. It's mean I want (toggle slide animation) in pure javascript code. — Faizan Anwer Ali
– Faizan Anwer Ali, Commented Dec 29, 2016 at 10:16
Possible duplicate of Convert Jquery slidetoggle code to Javascript — 4b0
– 4b0, Commented Dec 29, 2016 at 10:33

Tri · Accepted Answer · 2016-12-29 10:59:20Z

2

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>

answered Dec 29, 2016 at 10:59

Tri

16112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anil Talla · Accepted Answer · 2016-12-29 10:44:29Z

1

You can achive this by using css transition property.

Here is the JSFIDDLE

answered Dec 29, 2016 at 10:44

Anil Talla

7096 silver badges19 bronze badges

2 Comments

Faizan Anwer Ali Over a year ago

Faizan Anwer Ali Over a year ago

instead of toggle class I'll use it pure javascript. then it'll work. thanx for the css. jsfiddle.net/97Lahmoh/6

Collectives™ on Stack Overflow

jquery toggle slide animation to pure javascript animation

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related