4

我正在尝试使用 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 或插件的情况下实现这一点。

希望这有某种意义

4

3 回答 3

4

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

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'});

 });

感谢所有的帮助

于 2012-12-27T16:27:28.397 回答
0

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

$("#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/

于 2012-12-27T14:36:19.073 回答
0

已开发（当鼠标在 BODY 中移动时）：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'});
});
于 2013-12-20T19:00:55.803 回答