有人能给我一个jQuery动画函数的独立代码吗？

Question

最近我曾经提出这个问题： 想要了解Animate函数（计算和步进） 并得到了答复。

我试图删除jQuery的不必要代码，只保留jQuery动画函数。

如果有人能提供仅包含其技术的jQuery动画函数，我将非常感激。

- dinbrca

---

.animate 方法依赖于 jQuery 的其他部分；你为什么想要它“独立”？ - Shad

“不必要的代码”是什么意思？jQuery的动画函数依赖于库的其他部分，这是可以预料的。有什么阻止您将整个jQuery库包含进来吗？ - Frédéric Hamidi

如果你只是在寻找.animate函数的实现，你是否已经查看了jQuery源代码？ - David

Answer 1

创建动画其实很简单。设置一个时间间隔来更改元素的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来操作元素。

- Jasper

Answer 2

我认为您想要的是https://github.com/jquery/jquery/blob/master/src/effects.js，但使用jQuery时，您不能仅提取其中的一部分并期望其正常工作。也许有一种方法可以自定义构建jQuery，但是效果库将具有许多其他依赖项，如jQuery核心等才能正常运行。

同时相关的是https://dev59.com/4XA75IYBdhLWcg3wuLjD#3143256，它讨论了创建自定义构建的问题。

- dstarh