.stop（）& .animate（）jQuery函数转换为javascript [英] .stop() & .animate() jQuery functions into javascript

问题描述

我也想学习JavaScript。并将各种jQuery函数看作等效的JavaScript。

I want to learn the JavaScript as well. and looking the various jQuery functions to their equivalent JavaScript.

我想将此jQuery函数转换为其等效的JavaScript函数？我怎么能这样做？

I want to convert this jQuery function to its equivalent JavaScript functions? How can I do this?

$('.sample').stop().animate({
    left: '-102px'
}, 1000);

推荐答案

简而言之，jQuery动画是一个经常性的计时器这会改变每个计时器滴答的一个或多个CSS属性。

In a nutshell, a jQuery animation is a recurring timer that changes one or more CSS properties on each timer tick.

此外，jQuery实现了一个补间算法，可以计算每个计时器滴答，动画是提前还是落后于计划和调整，以便动画始终在指定的确切时间内完成。

In addition jQuery implements a tweening algorithm that calculates on each timer tick, whether the animation is ahead or behind schedule and adjusts so that the animation always completes in the exact time specified.

此外，jQuery实现了一个动画队列，以便可以将多个动画链接在一起（当前一个完成）。

In addition jQuery implements an animation queue so that multiple animations can be chained together (start the next one when the previous one completes).

此外，jQuery还支持缓动函数，允许您根据特定算法指定非线性动画，以便在此期间改变速度。

In addition jQuery supports easing functions which allow you to specify a non-linear animation that varies it's speed during the time according to a specific algorithm.

仅供参考，jQuery javascript源代码为完全可用如果您想了解更多详情。该工作的核心是一个名为 doAnimation（）的本地函数，尽管大部分工作都是在名为 step 和更新可以使用 jQuery.fx.prototype 的定义找到。

FYI, the jQuery javascript source code is fully available if you want more details. The core of the work is in a local function called doAnimation(), though much of the work is done in functions called step and update which can be found with the definition of jQuery.fx.prototype.

这是另一个答案，显示简单的淡入淡出动画纯粹的javascript。

Here's another answer that shows a simple fade animation in pure javascript.

这是一个一般教程。

你可以看到关于使用动画计时器的讨论这里。

You can see a discussion of using a timer for an animation here.

你可以看到讨论补间此处。

这是一个特定动画的javascript版本：

Here's a javascript version of your specific animation:

// node is the DOM element to animate
// prop is the CSS property name to animate
// end is the CSS value to animate to (only supports px units)
// duration is the time of the animation in ms
// fn is an optional callback when the animation is done
//     fn is called like this fn(node, arg)
// arg is an optional argument that is passed to the callback
// context is an optional argument that is the this pointer for the function
function animate(node, prop, end, duration, fn, arg, context) {
    var stepTime = 20;
    var startTime = new Date().getTime();
    var start = parseInt(getComputedStyle(node).getPropertyValue(prop), 10);
    if (typeof end === "string") {
        end = parseInt(end, 10);
    }

    function step() {
        // calc how much time has elapsed
        var nextValue, done, portionComplete;
        var timeRunning = new Date().getTime() - startTime;
        if (timeRunning >= duration) {
            nextValue = end;
            done = true;
        } else {
            portionComplete = timeRunning / duration;
            nextValue = ((end - start) * portionComplete) + start;
            done = false;
        }
        // set the next value
        node.style[prop] = nextValue + "px";
        if (!done) {
            setTimeout(step, stepTime);
        } else {
            context = context || window;
            fn.call(context, node, arg);
        }
    }
    // start the animation
    step();
}

工作演示： http://jsfiddle.net/jfriend00/Mc3xD/

为了简化理解，这不会实现jQuery示例的 .stop（）部分，因为这需要一个单独的数据结构来跟踪每个在给定对象上运行的动画计时器，可以在支持 stop（）的更复杂版本中看到： http://jsfiddle.net/jfriend00/mp4Yq/ 。

For simplicity of understanding, this doesn't implement the .stop() part of your jQuery example as that would need a separate data structure to keep track of each animation timer running on a given object which can be seen in a more involved version that supports stop(): http://jsfiddle.net/jfriend00/mp4Yq/.

这篇关于.stop（）& .animate（）jQuery函数转换为javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！