相当于 jQuery .animate() 的纯 JS

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>

原文由 Rizwan Mumtaz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 setTimeout 和 setInterval 方法用纯 javascript 实现复杂的动画。

请 在此处 查看。

这是移动元素的关键部分：

 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
}

原文由 Suresh Atta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

此版本使用 vanilla 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% 确定，只记得阅读一篇关于它的文章……

不要引用我的话！只是研究一下，

但是我写出的代码已经过测试可以正常工作..希望这对某人有帮助…

原文由 Ryan Stone 发布，翻译遵循 CC BY-SA 4.0 许可协议