添加緩解jQuery動畫

Question

嗨，我發現這個動畫，我想用我的導航鏈接一個微小，溫和的隨機運動，但它看起來不太平滑。 http://jsfiddle.net/2TUFF/

（Random Movement in a Fixed Container）

$(document).ready(function() { 
    animateDiv(); 

}); 

function makeNewPosition($container) { 

    // Get viewport dimensions (remove the dimension of the div) 
    $container = ($container || $(window)) 
    var h = $container.height() - 50; 
    var w = $container.width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh, nw]; 

} 

function animateDiv() { 
    var $target = $('.a'); 
    var newq = makeNewPosition($target.parent()); 
    var oldq = $target.offset(); 
    var speed = calcSpeed([oldq.top, oldq.left], newq); 

    $('.a').animate({ 
     top: newq[0], 
     left: newq[1] 
    }, speed, function() { 
     animateDiv(); 
    }); 

}; 

function calcSpeed(prev, next) { 

    var x = Math.abs(prev[1] - next[1]); 
    var y = Math.abs(prev[0] - next[0]); 

    var greatest = x > y ? x : y; 

    var speedModifier = 0.1; 

    var speed = Math.ceil(greatest/speedModifier); 

    return speed; 

}​ 

我已經試過玩弄容器的大小和速度，但不會有很大的幫助，我也嘗試添加緩和了jQuery自己，但我沒有知識掌握和失敗。

謝謝！

Answer 1

我相信你需要http://ijin.net/crSpline/demo.html才能獲得流暢的「微風」動畫。

相關答案：how to smooth jquery animations

下面是使用jQuery.crSpline在撥弄一個完整的例子：

http://jsfiddle.net/2TUFF/295/