Jquery - Animer Position d'arrière-plan avec accélération

Question

J'essaye d'animer un arrière-plan sur mousemove avec un peu d'accélération en utilisant jquery animate. Mais ne peux pas comprendre comment arrêter la mise en attente de l'animation et ont l'animation "suivre" la souris autour

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

});​ 

J'ai mis en place un jsFiddle pour montrer ce que je veux dire, je l'espère http://jsfiddle.net/KunZ4/1/

Passez la souris sur l'image du haut et vous verrez l'animation en arrière-plan suivre la souris. Mais je veux ajouter un peu d'assouplissement à cela, donc il suit la souris un peu plus lisse. L'utilisation de l'animation jquery semble faire la queue, mais je veux que l'animation rattrape un peu la souris lorsque le mouvement de la souris est arrêté. Je souhaite atteindre cet objectif sans utiliser d'interface utilisateur ou de plugins.

Espérons que fait une sorte de sens

Answer 1

J'ai trouvé quelque chose qui a fonctionné pour moi, pour tous ceux qui cherchent d'autre pour cette

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

L'assouplissement peut être ajustée en changeant la durée

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

});  

Merci pour toute l'aide

Answer 2

Essayez d'ajouter stop(true) avant que la fonction .animate:

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

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

});​ 

Fiddle: http://jsfiddle.net/maniator/KunZ4/4/

Answer 3

DÉVELOPPÉ, (lorsque la souris se déplaçant dans le corps): 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'}); 
});