纯javascript中的jquery动画

Question

纯javascript中jquery animate的等价物是什么？

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

Answer 1

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

通过使用setTimeout和setInterval方法

请点击这里.

这是移动元素的关键部分

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% 确定，只需记住阅读有关它的文章...
不要引用我！只是研究它，
但我写的代码已经过测试可以工作..希望这对某人有帮助...