Animating DOM elements

KunalAgnihotri

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

blindfish

The answer is in the docs:

The .mouseOver() function is called once after every time a mouse moves onto the element.

My emphasis... So you would only expect this to trigger the animation once.

Try setting a boolean variable isOver. Set this to true on mouseOver and false on mouseOut. Check against isOver in draw to determine when the animation should run...

KunalAgnihotri

Thankyou. I guess something like jquery is better for these tasks

blindfish

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