.stop()& amp; .animate()将jQuery函数转换为javascript [英] .stop() & .animate() jQuery functions into javascript

问题描述

我也想学习JavaScript.然后将各种jQuery函数查找为等效的JavaScript.

我想将此jQuery函数转换为其等效的JavaScript函数吗?我该怎么办?

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

解决方案

简而言之，jQuery动画是一个循环计时器，它在每个计时器刻度上更改一个或多个CSS属性.

此外，jQuery实现了一个补间算法，该补间算法会在每个计时器滴答时进行计算，以判断动画是在进度之前还是在进度之后，并进行调整，以使动画始终在指定的确切时间完成.

此外，jQuery实现了一个动画队列，以便可以将多个动画链接在一起(在上一个动画完成时开始下一个动画的播放).

此外，jQuery支持缓动功能，使您可以指定根据特定算法随时间变化速度的非线性动画.

仅供参考，如果您需要更多详细信息，则jQuery javascript源代码完全可用 .这项工作的核心是在名为doAnimation()的局部函数中，尽管许多工作是在名为step和update的函数中完成的，这些函数可以在jQuery.fx.prototype的定义中找到.

这是另一个显示简单的答案在纯JavaScript中淡化动画.

这是关于动画的通用教程.

您可以在此处.

您可以在此处中看到有关补间的讨论./p>

以下是您特定动画的javascript版本:

// 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 {
            if (fn) {
                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/.

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

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

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

解决方案

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

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.

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

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.

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.

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

Here's a general tutorial on animation.

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

You can see a discussion of tweening here.

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 {
            if (fn) {
                context = context || window;
                fn.call(context, node, arg);
            }
        }
    }
    // start the animation
    step();
}

Working demo: http://jsfiddle.net/jfriend00/Mc3xD/

---

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()& amp; .animate()将jQuery函数转换为javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！