javascript - Moving element to cursor position gets logged, but the change of position is not applied -
i have object chainable functions, works ok-ish. clicking on triangle trigger animation , translates element accordingly. have function should translate triangle current mouse position, js following:
movetotarget: function(e) { var mousex = 0, mousey = 0, xp = 0, yp = 0; xp += (mousex - xp) / 12; yp += (mousey - yp) / 12; block.style.left = xp + 'px'; block.style.top = yp + 'px'; settimeout(movetotarget,30); return this;
keep in mind 1 of methods on object animateblock , not sure if have call animateblock.movetotarget in settimeout.
this invocation:
container.addeventlistener("click", function(e){ console.log(e.pagey); // log y position animateblock.movetotarget;});
i no js lint errors, no runtime errors thrown in console, not apply translation reason, missing here?
the link:
here's working codepen: https://codepen.io/anon/pen/mmxwwv?editors=0111
i had make several changes, apologies:
- you calling movetotarget() without parameter,
event
- the movetotarget() function wasn't doing anything. weren't using
event
, values 0. - i removed margin: 50% 0; triangle, since messed x position (making using translatex() difficult).
- i put "px" directly inside function, parameters numbers now.
- new function movexandy() modify both translatex() , translatey() @ same time (otherwise they'd overwrite each other).
- code's kind of mess, i'm not used editing on codepen, apologies that.
Comments
Post a Comment