有人可以给我一个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屋!