We are about to switch to a new forum software. Until then we have removed the registration on this forum.
How do I trigger an animation on mouseover-ing DOM elements?
var el;
var bk;
function setup() {
el = select(“#el");
frameRate(24);
bk = 0;
}
function draw() {
el.mouseOver(back);
}
function back(){
troika.style("margin-top", 600 + bk + "px");
bk--;
}
in this code ** function back** fires only once on mouse over. What I would like to happen is my HTML element to move up gradually(say 100px) once I mouseOver it. Currently it only inches up a couple of pixels when I mouseOver as function back is triggered only once
Answers
The answer is in the docs:
My emphasis... So you would only expect this to trigger the animation once.
Try setting a boolean variable
isOver
. Set this totrue
on mouseOver andfalse
on mouseOut. Check againstisOver
in draw to determine when the animation should run...Thankyou. I guess something like jquery is better for these tasks
Well, it depends on the animation you're trying to trigger. If it's animating a DOM element then jQuery may well be the better option (but you should also check to see if it can be done with CSS). If you're triggering a sketch animation from a DOM element then my suggestion would be better ;)