用纯javascript动画，没有jquery

Question

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.

Answer 1

You can do slides and animations using CSS3, eg

.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, eg

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!

Answer 2

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.