Question

I am doing a presentation on jQuery for some co-workers and I would like to demonstrate how certain tasks in javascript can be made easier using jQuery.

I have come up with a small jQuery function that does some element selection/animation and I was hoping to show them the javascript equivalent of this code.

My problem is that my javascript is a bit rusty and I’d rather not try to figure out how to implement this using javascript. Does anyone know of a way to generate javascript from jQuery? If not, can anyone recommend a good resource for finding side by side comparisons of equivalent javascript vs jQuery?

My code:

var move = 200;
$('#clickme').click(function() {
    $('#main div:even').animate({
        left:"+="+move
    }, 2000);
    move = -move;
});

Answer 1

This article has a good presentation that shows off exactly what you are trying to show your coworkers.

It shows how this :

var example = null; // object
function doMove() {
  example.style.left = parseInt(example.style.left)+1+'px';
  setTimeout(doMove,20); // call doMove in 20msec
}
function init() {
  example = document.getElementById('example'); // get the "example" object
  example.style.left = '0px'; // set its initial position to 0px
  doMove(); // start animating
}
window.onload = init;

Can be turned into this :

$("#element").animate({ left: 100px; });