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动画看起来像是在排队，但我希望当鼠标移动停止时，动画能够在稍有延迟的情况下赶上鼠标。

我想在不使用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'});

 });    

感谢你所有的帮助

Answer 2

尝试在.animate函数之前添加stop(true)：

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

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

});​

小提琴：http://jsfiddle.net/maniator/KunZ4/4/

Answer 3

开发，(当鼠标在身体内移动时)：http://jsfiddle.net/hX22a/

$.easing.smoothmove = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
}; $("body").bind('mousemove', function(e){
$("#animateme").animate({
'background-position-x': e.pageX,
'background-position-y': e.pageY
}, {queue:false,duration:200,easing:'smoothmove'});
});