纯JavaScript中的jQuery动画函数等效 [英] jQuery animate function equivalent in pure JavaScript

问题描述

以下纯JavaScript的jQuery动画等效什么?

What is the equivalent of the following jQuery animate in pure JavaScript?

function animate(element, position, speed) {
  $(element).animate({
    "top": position
  }, speed);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

推荐答案

您可以使用纯JavaScript实现复杂的动画.

You can acheive complex animations with pure javascript.

通过使用setTimeout和setInterval方法

请在此处进行确认.

这是移动元素的关键部分

Here is the key part of moving an element

function move(elem) {
    var left = 0
    function frame() {
        left++  // update parameters
        elem.style.left = left + 'px' // show frame
        if (left == 100)  // check finish condition
            clearInterval(id)
    }
    var id = setInterval(frame, 10) // draw every 10ms
}

这篇关于纯JavaScript中的jQuery动画函数等效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！