.stop（）＆.animate（）將jQuery函數轉換爲javascript

Question

我也想學習JavaScript。並將各種jQuery函數查找爲等效的JavaScript。

我想將此jQuery函數轉換爲其等效的JavaScript函數？我怎樣才能做到這一點？

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

Answer 1

簡而言之，一個jQuery動畫是一個循環定時器，它改變每個計時器滴答的一個或多個CSS屬性。

此外，jQuery實現了補間算法，該算法根據每個計時器滴答計算動畫是提前還是落後於計劃，並進行調整以便動畫始終在指定的確切時間內完成。

此外jQuery實現了一個動畫隊列，以便多個動畫可以鏈接在一起（當前一個完成時開始下一個動畫）。

此外，jQuery支持easing函數，它允許您指定一個非線性動畫，根據特定的算法在該時間內改變其速度。

僅供參考，jQuery的javascript源代碼是fully available，如果你想了解更多的細節。這項工作的核心是一個名爲doAnimation()的本地函數，儘管大部分工作都是在step和update函數中完成的，可以在jQuery.fx.prototype的定義中找到。

這是另一個答案，顯示在純JavaScript中的simple fade animation。

以下是關於動畫的general tutorial。

你可以看到一個動畫使用定時器的討論here。

您可以看到補間here的討論。

這是你的特定的動畫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 { 
      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/的更復雜版本中看到。

Answer 2

你提醒我，當我開始學習JS，然後很高興地發現了jQuery，反正我不知道爲什麼你正在做的，反之亦然，但回答你的問題在JavaScript

動畫可以使用setInterval的使用功能與改變頂部，左..等屬性超過非常少量的時間（通常24毫秒），這對人眼來說就像一個流，而不是像單獨的位置拍攝，也可以考慮使用純css3，但是可以使用這樣的功能

var position,ratio,time,mytimer; 
document.getElementById("hi").style.left=0; 
function animate_left(position,time) 
{ 
ratio=position/time; 
if(parseInt(document.getElementById("hi").style.left)<=position) 
{ 
document.getElementById("hi").style.left=(parseInt(document.getElementById("hi").style.left)+ratio*100).toString()+"px" 
} 

else 
{ 
    clearInterval(mytimer) 
} 
} 
function animate(value1,value2) 
{ 
mytimer=setInterval(function(){animate_left(value1,value2)},10) //where 10 is minimum smooth animation factor for human eye 
} 
animate(600,1000); 

http://jsfiddle.net/prollygeek/er67f/6/