谁能给我一个独立的jQuery动画函数代码答案

【问题标题】：Can someone give me a standalone code of the jQuery animation functions谁能给我一个独立的jQuery动画函数代码
【发布时间】：2014-04-01 02:27:04
【问题描述】：

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

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

如果有人可以只提供具有他们技术的 jQuery 动画函数，我将不胜感激。

【问题讨论】：

.animate 方法依赖于 jQuery 的其他部分；你为什么要它“独立”？
unnecessary code 是什么意思？正如预期的那样，jQuery 的动画函数依赖于库的其他部分。有什么东西阻止你将 jQuery 库作为一个整体包含进来吗？
如果你只是在寻找.animate函数的实现，你查过jQuery源码吗？

标签： jquery animation

【解决方案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 中。

【讨论】：

【解决方案2】：

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

同样相关的是https://stackoverflow.com/a/3143256/138883，它谈到了创建自定义构建

【讨论】：