简化jQuery动画

Question

Hi i found this animation, which i would like to use to give my navigation links a tiny, gentle random movement, but it just doesn't look very smooth. 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;

}​

I've tried playing around with container size and speed but that doesn't help a lot, I also tried adding easing to the jquery myself but I have no knowledge of that mastery and failed.

Thanks!

Answer 1

I believe you need http://ijin.net/crSpline/demo.html for smooth "light breeze" animations.

Related answer: how to smooth jquery animations

Here is a full example in fiddle using jQuery.crSpline :

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