Question

152

how to animate following the mouse in jquery

rated 0 times [ 155] [ 3] / answers: 1 / hits: 22826 / 14 Years ago, mon, january 31, 2011, 12:00:00

OK, this works perfectly fine for following my mouse.

//

$(document).mousemove(function(e){

  $(#follower).css({

      'top': e.pageY + 'px';

      'left': e.pageX + 'px';

  });

});

//

And this works great for animating the mouse to a clicked point

//

$(document).click(function(e){

  $(#follower).animate({

      top: e.pageY + 'px';

      left: e.pageX + 'px';

  }, 800);

});

//

But I personally feel that logically this SHOULD work! Coming from my point of view as the webscripter. Amd then my question is, how can I make this work. I want the #follower to try and follow my mouse with a dynamic kind of lagging behind feel.

//

$(document).mousemove(function(e){

  $(#follower).animate({

      top: e.pageY + 'px';

      left: e.pageX + 'px';

  }, 800);

});

//

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyterryp

Add To Favorites

Follow

Total Points: 290

Total Questions: 92

Total Answers: 95

Location: Montenegro

Member since Sun, May 7, 2023

1 Year ago

harleyterryp questions

1 error Filters are deprecated how to solve this error in vue.js 3

Fri, Jun 11, 21, 00:00, 3 Years ago

1 How to Insert an image inside an input field in react js?

Fri, May 28, 21, 00:00, 3 Years ago

1 ElectronJS: Uncaught TypeError: Cannot read property BrowserWindow / getCurrentWindow of undefined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 Access React context API from _app in NextJS

Fri, Oct 2, 20, 00:00, 4 Years ago

1 jsPDF with AutoTable not working - Possible JavaScript issue

Sun, Jun 28, 20, 00:00, 4 Years ago

View All

answered 14 Years ago billtreytonb · Accepted Answer

How about using setInterval and an equation called zeno's paradox:

http://jsfiddle.net/88526/1/

That's the way I usually do it.

As requested, I've included the code in this answer. Given a div with absolute positioning:

CSS:

#follower{

  position : absolute;

  background-color : red;

  color : white;

  padding : 10px;

}

HTML:

<div id=follower>Move your mouse</div>

JS w/jQuery:

var mouseX = 0, mouseY = 0;

$(document).mousemove(function(e){

   mouseX = e.pageX;

   mouseY = e.pageY; 

});



// cache the selector

var follower = $(#follower);

var xp = 0, yp = 0;

var loop = setInterval(function(){

    // change 12 to alter damping, higher is slower

    xp += (mouseX - xp) / 12;

    yp += (mouseY - yp) / 12;

    follower.css({left:xp, top:yp});



}, 30);