Question

I found this “div follows mouse” animation:
JSFiddle that belongs to the answer posted in: How to animate following the mouse in 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);

​

I got quite intrigued by the inner workings and I tried to understand what the code is doing. I am currently learning javascript and I tried to replicate the “point to point” animation. I found this: Point to point animation algorithm, but it feels that the code of the original poster is pretty long and repetitive.

My current basic level of javascript is being an obstacle to fully understand the jQuery version (i still didn’t enter into the jQuery realm). Yet, I think that do this kind of animation in javascript might be possible, but the only way I can think about is with a code similar to the “point to point” link.

Can something like this be done with a code as short as the jQuery version? Or to do just javascript requires much longer routine?

Thanks for any suggestion or comment that you might have!

Answer 1

Can something like this be done with a code as short as the jQuery version?

In this case, nearly, yes, because what’s being done is fairly simple and only a small amount of jQuery’s functionality is used. Specifically:

• It’s hooking the mousemove event on document, which can easily be done with addEventListener (or attachEvent on older versions of IE).

• It’s locating an element by id ($("#follower")), which can easily be done with getElementById.

• It’s setting the left and top of an element via jQuery’s css function. This can easily be done by setting the left and top properties on the element’s style property.

Putting that all together: Fiddle

var mouseX = 0, mouseY = 0;
if (document.addEventListener) {
    document.addEventListener('mousemove', mouseMoveHandler, false);
}
else if (document.attachEvent) {
    document.attachEvent('onmousemove', mouseMoveHandler);
}
else {
    document.onmousemove = function(event) {
        mouseMoveHandler(event || window.event);
    };
}

function mouseMoveHandler(e) {
   mouseX = e.pageX;
   mouseY = e.pageY; 
}

// cache the element
var follower = document.getElementById("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.style.left = xp + "px";
follower.style.top  = yp + "px";

}, 30);

As you can see, the biggest issue is hooking the event in a way that plays nicely with others. Although you could just use the document.onmousemove version, that would clobber any other mousemove handlers on document, which is why we first look for addEventListener or attachEvent.

Some handy references, in roughly chronological order (latter ones update/supercede/add to earlier ones):

• DOM2 Core
• DOM2 HTML
• DOM2 Events
• DOM3 Core
• DOM3 Events
• Other DOM specs
• HTML5 Web Application APIs

None of which should be taken to say that you can’t use a good library like jQuery, there are several good reasons to (the events thing above is just one example). But it’s always best to understand the basics as well, even if you use a library to avoid having to deal with them all that much.