Question

我正在尝试使用jquery animate在一些缓动中为mousemove上的背景设置动画。但是无法弄清楚如何停止动画的排队并拥有动画＆＃34;关注＆＃34;

鼠标

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

尝试在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/

Answer 3

开发，（当鼠标在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'});
});

Jquery - 使用缓动动画背景位置

3 个答案: