.stop() & .animate() jQuery functions into javascript

Question

I want to learn the JavaScript as well. and looking the various jQuery functions to their equivalent JavaScript.

I want to convert this jQuery function to its equivalen

Answer 1

In a nutshell, a jQuery animation is a recurring timer that changes one or more CSS properties on each timer tick.

In addition jQuery implements a tweening algorithm that calculates on each timer tick, whether the animation is ahead or behind schedule and adjusts so that the animation always completes in the exact time specified.

In addition jQuery implements an animation queue so that multiple animations can be chained together (start the next one when the previous one completes).

In addition jQuery supports easing functions which allow you to specify a non-linear animation that varies it's speed during the time according to a specific algorithm.

FYI, the jQuery javascript source code is fully available if you want more details. The core of the work is in a local function called doAnimation(), though much of the work is done in functions called step and update which can be found with the definition of jQuery.fx.prototype.

Here's another answer that shows a simple fade animation in pure javascript.

Here's a general tutorial on animation.

You can see a discussion of using a timer for an animation here.

You can see a discussion of tweening here.

Here's a javascript version of your specific animation:

// node is the DOM element to animate
// prop is the CSS property name to animate
// end is the CSS value to animate to (only supports px units)
// duration is the time of the animation in ms
// fn is an optional callback when the animation is done
//     fn is called like this fn(node, arg)
// arg is an optional argument that is passed to the callback
// context is an optional argument that is the this pointer for the function
function animate(node, prop, end, duration, fn, arg, context) {
    var stepTime = 20;
    var startTime = new Date().getTime();
    var start = parseInt(getComputedStyle(node).getPropertyValue(prop), 10);
    if (typeof end === "string") {
        end = parseInt(end, 10);
    }

    function step() {
        // calc how much time has elapsed
        var nextValue, done, portionComplete;
        var timeRunning = new Date().getTime() - startTime;
        if (timeRunning >= duration) {
            nextValue = end;
            done = true;
        } else {
            portionComplete = timeRunning / duration;
            nextValue = ((end - start) * portionComplete) + start;
            done = false;
        }
        // set the next value
        node.style[prop] = nextValue + "px";
        if (!done) {
            setTimeout(step, stepTime);
        } else {
            if (fn) {
                context = context || window;
                fn.call(context, node, arg);
            }
        }
    }
    // start the animation
    step();
}

Working demo: http://jsfiddle.net/jfriend00/Mc3xD/

---

For simplicity of understanding, this doesn't implement the .stop() part of your jQuery example as that would need a separate data structure to keep track of each animation timer running on a given object which can be seen in a more involved version that supports stop(): http://jsfiddle.net/jfriend00/mp4Yq/.

Answer 2

you remind me when i started learning js , and then was very happy to find jquery , anyway i dont know why you are doing vice versa , but to answer you question

Animation in javascript can be used using setInterval function with changing the top , left .. etc attributes over a very small amount of time ( usually 24 milli secconds ) which to the human eye are like a stream and not like seperate shots of positions , also you may consider using pure css3 , however a function like this may be used

 var position,ratio,time,mytimer;
document.getElementById("hi").style.left=0;
function animate_left(position,time)
{
ratio=position/time;
if(parseInt(document.getElementById("hi").style.left)<=position)
{
document.getElementById("hi").style.left=(parseInt(document.getElementById("hi").style.left)+ratio*100).toString()+"px" 
}

else
{
    clearInterval(mytimer)
}
}
function animate(value1,value2)
{
mytimer=setInterval(function(){animate_left(value1,value2)},10) //where 10 is minimum smooth animation factor for human eye
}
animate(600,1000);

http://jsfiddle.net/prollygeek/er67f/6/