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