有人可以给我一个独立代码的jQuery动画功能

Question

最近我问了这个问题： Would like to understand the Animate function (calculation and stepping) 我得到了答案。

我试图删除不必要的jQuery代码，只留下jQuery动画功能。

如果有人可以提供我只有具有他技术的jQuery动画功能 - 我会非常感激。

Answer 1

我认为你想要的是https://github.com/jquery/jquery/blob/master/src/effects.js但用jquery你不能拔出它的一部分，并期望任何工作。可能有一种方法可以自定义构建jquery，但是效果库将有许多其他依赖于jquery core等的工作。

相关的还有https://stackoverflow.com/a/3143256/138883其中谈到生成定制

Answer 2

创建动画其实是非常简单的。设置的时间间隔递归地改变元素的CSS属性，让你的函数运行：

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)); 

这里是一个演示：http://jsfiddle.net/aDLbK/1/

中 - 当然，这仍然使用jQuery的.css()功能，但你可以删除单条线放置在你想操纵元素的任何JavaScript中。