Jquery - 通过缓动对背景位置进行动画处理

Question

我正在尝试使用 jquery animate 通过一些缓动来为 mousemove 上的背景设置动画。但无法弄清楚如何停止动画排队并让动画“跟随”鼠标

HTML:

Animate Background<br />
<div id="animateme"></div>​

JS:

$("#animateme").bind('mousemove', function(e) {

    $(this).animate({
        'background-position-x': e.pageX,
        'background-position-y': e.pageY
    }, 100, 'swing');

});​

我已经设置了一个 jsfiddle 希望能表达我的意思 http://jsfiddle.net/KunZ4/1/

将鼠标悬停在顶部图像上，您可以看到背景动画跟随鼠标移动。但我想为此添加一些缓动，以便它跟随鼠标更平滑一些。

使用 jquery 动画似乎要排队，但我希望当鼠标移动停止时动画能够稍微延迟一点 catch 鼠标。

我想在不使用 UI 或插件的情况下实现这一目标。

希望这有某种意义

Answer 1

我发现了一些对我有用的东西，对其他正在寻找这个的人也有用

http://jsfiddle.net/KunZ4/6/

可以通过改变持续时间来调整缓动

$.easing.smoothmove = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
 }; 


$("#animateme").bind('mousemove', function(e){

 $(this).animate({
   'background-position-x': e.pageX,
   'background-position-y': e.pageY
 }, {queue:false,duration:200,easing:'smoothmove'});

 });    

感谢大家的帮助