Question

在纯JavaScript中，以下jQuery动画的等价物是什么？

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>

Answer 1

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

使用setTimeout和setInterval方法

请检查here。

这是移动元素的关键部分

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
}

Answer 2

此版本使用香草javascript .animate（）函数，性能更高或更佳
而不是requestAnimation框架。并且它也是JQuerys .animate（）的适当替代。
您可以尝试迭代，计时功能和填充方法，以及将其与其他动画进行菊花链连接

document.getElementById("Elem");
         Elem.style.position = "absolute";
         Elem.animate({
              top: ['8px', '280px']
                 },{ duration: 1760,        // number in ms [this would be equiv of your speed].
                     easing: 'ease-in-out',
                     iterations: 1,         // infinity or a number.
                  // fill: ''
        });

我相信setTimeout和setInterval函数都在幕后使用了不安全的eval（）函数，但是对此并不是100％的确定，只记得阅读一篇有关它的文章...
不要在那上面引用我！只要研究一下
但是我写出的代码已经过测试，可以正常工作。希望这可以帮助某人...

Answer 3

Element.animate（）函数似乎非常简单且有用。但是目前存在很多兼容性问题。您可以阅读以下内容：

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

我建议习惯于requestAnmationFrame。它与所有浏览器兼容，并且功能非常强大：

https://javascript.info/js-animation

jquery使用纯JavaScript动画动画

3 个答案: