有人可以给我一个jQuery动画函数的独立代码 [英] Can someone give me a standalone code of the jQuery animation functions

问题描述

最近我问过这个问题：
想了解Animate功能（计算和步进）
我得到了答案。

recently ago I asked this question: Would like to understand the Animate function (calculation and stepping) and I got answered.

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

I tried to remove unnecessary code of jQuery and leaving the jQuery animation functions only.

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

If someone can provide me only the jQuery animation functions that has thier technique - I will be really grateful.

推荐答案

创建动画实际上非常简单。设置一个间隔来更改元素的CSS属性并让你的函数递归运行：

Creating an animation is actually pretty simple. Set an interval to change an element's CSS properties and let your function run recursively:

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

Of-course this still uses jQuery's .css() function but you can remove that single line and place in whatever JavaScript you want to manipulate the element.

这篇关于有人可以给我一个jQuery动画函数的独立代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！