Can this animation in jquery be done in JS without jquery and still retain simplicity?

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!

T.J. Crowder · Accepted Answer · 2012-12-01T10:30:35.103

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):

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.

Thank you, I'll be sure to keep reading the references. I quite like this language, and your explanation is very complete, so I hope my skills keep growing! — telex-wap, Dec 01 '12 at 10:35
Also note you could simply write `Node.prototype.addEventListener = Node.prototype.addEventListener || Node.prototype.attachEvent` once and simply use `addEventListener` from then on. — John Dvorak, Dec 01 '12 at 10:36
@JanDvorak: Can you? I thought the versions of IE that don't have `addEventListener` *also* don't support extending the prototypes of HTML elements. (Well, I don't know for sure about IE8, but IE6 and IE7 don't allow element prototype extensions.) — T.J. Crowder, Dec 01 '12 at 10:39
@T.J.Crowder Didn't know about that, sorry. I certainly did succeed extending `Array` in IE8. — John Dvorak, Dec 01 '12 at 10:55
@JanDvorak: Yeah, IE (at least back through IE6, probably even earlier) is happy to allow you to extend *JavaScript*'s objects' prototypes. But not the host-provided things (in this case, HTML elements). — T.J. Crowder, Dec 01 '12 at 10:57
@T.J.Crowder IIRC the ECMAScript standard allows you to extend _any_ object. This doesn't say much about what IE allows, though. — John Dvorak, Dec 01 '12 at 11:04
@JanDvorak: Not host objects, they're special. Amongst other things, they're [not required to have prototypes](http://www.ecma-international.org/ecma-262/5.1/#sec-8.6.2). Host objects are also not required to allow you to extend them (add properties ad hoc). — T.J. Crowder, Dec 01 '12 at 11:07

Can this animation in jquery be done in JS without jquery and still retain simplicity?

1 Answers1