有人可以給我一個獨立代碼的jQuery動畫功能

Question

最近我問了這個問題： Would like to understand the Animate function (calculation and stepping) 我得到了答案。

我試圖刪除不必要的jQuery代碼，只留下jQuery動畫功能。

如果有人可以提供我只有具有他技術的jQuery動畫功能 - 我會非常感激。

Answer 1

我認爲你想要的是https://github.com/jquery/jquery/blob/master/src/effects.js但用jquery你不能拔出它的一部分，並期望任何工作。可能有一種方法可以自定義構建jquery，但是效果庫將有許多其他依賴於jquery core等的工作。

相關的還有https://stackoverflow.com/a/3143256/138883其中談到生成定製

Answer 2

創建動畫其實是非常簡單的。設置的時間間隔遞歸地改變元素的CSS屬性，讓你的函數運行：

var distance  = 300, 
    frames  = 30, 
    current_frame = 0, 
    time   = 1000, 
    delta   = Math.floor(distance/frames), 
    $element  = $('#my-element'), 
    my_timer; 

my_timer = setInterval(function() { 

    //make sure the end of the animation has not been reached 
    if (current_frame < frames) { 

     //get the current property you want to animate and add to it the `delta` variable which is how much the property should change in each iteration 
     var left = parseInt($element.css('left').replace('px', ''), 10); 
     $element.css('left', (left + delta)); 
    } else { 

     //the end of the animation has been reached so stop the interval 
     clearInterval(my_timer); 
    } 
    current_frame++; 
}, Math.floor(time/frames)); 

這裏是一個演示：http://jsfiddle.net/aDLbK/1/

中 - 當然，這仍然使用jQuery的.css()功能，但你可以刪除單條線放置在你想操縱元素的任何JavaScript中。