I was using jquery/jquery-ui's slideDown() animation function for a particular task. It now transpires that I will not be able to use jQuery in this project. I also cant use YUI or any other libraries. So I wondering is there a way to perform a slideDown style animation using pure javascript?

Edit: I have to do it without jQuery because I am using selenium to control a webpage and on this particular site adding jQuery to the page breaks event handlers for some reason.

I was using jquery/jquery-ui's slideDown() animation function for a particular task. It now transpires that I will not be able to use jQuery in this project. I also cant use YUI or any other libraries. So I wondering is there a way to perform a slideDown style animation using pure javascript?

Edit: I have to do it without jQuery because I am using selenium to control a webpage and on this particular site adding jQuery to the page breaks event handlers for some reason.

• javascript

• 6 Why not just look at jQuery's implementation? It's just javascript in there. – canon Commented Dec 29, 2011 at 18:29
• 1 If you don't want jQuery, why have you added the [jQuery] tag to your question? I've removed it. – Rob W Commented Dec 29, 2011 at 18:30
• @RobW The functionality in question es from jQuery... – canon Commented Dec 29, 2011 at 18:31
• Agree with @antisanity. It's pure javascript in there so it IS possible. The thing is: such decision is cost effective? (to reinvent the wheel) – Alfabravo Commented Dec 29, 2011 at 18:32
• One thing I must point out: If you're being banned from using libraries then ask why and point out that you will end up re-inventing the wheel. – ridecar2 Commented Dec 29, 2011 at 18:33

2 Answers 2

You can do slides and animations using CSS3, e.g.

.slidable {
  position: relative;
  -webkit-animation: Slider 2s ease-in-out;
}
@-webkit-keyframes Slider {
  from {
    top: 0px;
  }
  to {
    top: 100px;
  }
}

Use -moz- for Firefox. Javascript can do movements as well, just put them in timers, e.g.

var top = 0;
window.Timeout(MoveSomething, 10);
function MoveSomething {
  var el = document.getElementById('moveme');
  top += 2;      
  el.style.top = top + 'px';
  if (top < 100) window.Timeout(MoveSomething, 10);
}

Just takes coding!

The obvious answer is yes...quick question...couldn't you just do an ASYNC load of jQuery into the document and then use it after the fact, or can you not use it because of other limitations?

Worst case you could rip out the part you needed, but that doesn't make much sense. If you can edit any of the JS you could easily paste jQuery just above your code.