Can someone give me a standalone code of the jQuer

Question

recently ago I asked this question: Would like to understand the Animate function (calculation and stepping) and I got answered.

I tried to remove unnecessary code of jQuery and leaving the jQuery animation functions only.

If someone can provide me only the jQuery animation functions that has thier technique - I will be really grateful.

Answer 1

Creating an animation is actually pretty simple. Set an interval to change an element's CSS properties and let your function run recursively:

var distance      = 300,
    frames        = 30,
    current_frame = 0,
    time          = 1000,
    delta         = Math.floor(distance / frames),
    $element      = $('#my-element'),
    my_timer;

my_timer = setInterval(function () {

    //make sure the end of the animation has not been reached
    if (current_frame < frames) {

        //get the current property you want to animate and add to it the `delta` variable which is how much the property should change in each iteration
        var left = parseInt($element.css('left').replace('px', ''), 10);
        $element.css('left', (left + delta));
    } else {

        //the end of the animation has been reached so stop the interval
        clearInterval(my_timer);
    }
    current_frame++;
}, Math.floor(time / frames));

Here is a demo: http://jsfiddle.net/aDLbK/1/

Of-course this still uses jQuery's .css() function but you can remove that single line and place in whatever JavaScript you want to manipulate the element.

Answer 2

I think what you want is https://github.com/jquery/jquery/blob/master/src/effects.js but with jquery you cant just pull out part of it and expect anything to work. There might be a way to custom build jquery but the effects library will have many other dependencies on jquery core etc to work.

Also relevant is https://stackoverflow.com/a/3143256/138883 which talks about creating custom builds