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 equivalent JavaScript functions? How can I do this?

$('.sample').stop().animate({
    left: '-102px'
}, 1000);

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 equivalent JavaScript functions? How can I do this?

$('.sample').stop().animate({
    left: '-102px'
}, 1000);

• javascript
• jquery

Share Improve this question Follow edited Nov 24, 2013 at 17:14 Tushar Gupta - curioustushar 57.1k2424 gold badges106106 silver badges109109 bronze badges asked Nov 24, 2013 at 17:11 Praful BagaiPraful Bagai 17.5k5656 gold badges149149 silver badges280280 bronze badges 7

• You cannot convert this with a basic syntax change. You have to calculate all the differences and animation times. If pure javascript could do it easily, there wouldn't be a need for jquery – thenewseattle Commented Nov 24, 2013 at 17:13
• 2 You should start with something other than the animation part of jQuery. That is one of the more plex parts of jQuery, that takes quite a bit of work to convert to plain Javascript. – Guffa Commented Nov 24, 2013 at 17:14
• 1 Do you want to implement jQuery's animate without jQuery? Because a lot of thought and effort went into developing jQuery, so if you can use it I strongly suggest you use it. As thenewseattle said, jQuery is a Javascript library. – CompuChip Commented Nov 24, 2013 at 17:14
• "How can I do this?" By looking at the source code. But animations are rather plex. – Felix Kling Commented Nov 24, 2013 at 17:15
• 1 You can view the jQuery source code at github./jquery/jquery/blob/master/src/effects.js – Gabriele Petrioli Commented Nov 24, 2013 at 17:17

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

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 pletes 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 pletes).

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/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/jfriend00/mp4Yq/.

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/prollygeek/er67f/6/