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

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