Question

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

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

如果某人只能为我提供具有其他技术的jQuery动画功能 - 我将非常感激。

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中。

Answer 2

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

同样相关的是https://stackoverflow.com/a/3143256/138883，其中讨论了创建自定义构建

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

2 个答案: