JQuery - Animation Background Position With Weakening

Question

I am trying to animate a background on mousemove with some weakening using jquery animate. But I can’t understand how to stop the sequence of animation and make the animation “follow” the mouse

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

I installed jsfiddle to hopefully show what I mean http://jsfiddle.net/KunZ4/1/

Hover over the top image and you will see how the background animation follows the mouse. But I want to add some relief to this, so it follows the mouse a little smoother.

Using jquery animations seems to be in the queue, but I want the animation to get the mouse a little delay when the mouse movement is stopped.

I want to achieve this without using a user interface or plugins.

Hope this makes some sense

Answer 1

I found something that worked for me, for those looking for this

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

Attenuation can be adjusted by changing the duration

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

thanks for the help

Answer 2

Try adding stop(true) before the .animate function:

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

Designed (when the mouse moves in 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'}); });