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

Question

最近我问过这个问题: 想了解Animate功能(计算和步进) ,我得到了答案.

我试图删除不必要的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中.