Question

I have this code where the color changes on onmouseout and onmouseover events. However if I the move mouse over those boxes very fast the onmouseover function doesn’t work properly and doesn’t change the color. What could be the problem?

JS Fiddle Code

window.onload = function() {
    var paper = Raphael(0, 0, 640, 540);

    for (i = 0; i < 2; i++) {
        for (j = 0; j < 2; j++) {
            (function(i, j) {
                var boxes = paper.rect(0 + (j * 320), 0 + (i * 270), 320, 270).attr({
                    fill: '#303030',
                    stroke: 'white'
                });
                boxes.node.onmouseover = function() {
                    boxes.animate({fill:'red'},500);
                };
                boxes.node.onmouseout = function() {
                    boxes.animate({fill:'#303030'},300);
                };
            })(i, j);
        }
    }
}​

*Edit: Also how can I ensure that animation is applied to only 1 box even if I move the mouse quickly.

Answer 1

The mouseover animation is 200ms longer than the mouseout, so if you mouseover and mouseout in less than 200ms total, the animations run in parallel, and the mouseover one finishes last, leaving the color red.

Instead, add a .stop() before each .animate to stop the animations from competing:

            boxes.node.onmouseover = function() {
                boxes.stop().animate({fill:'red'},500);
            };
            boxes.node.onmouseout = function() {
                boxes.stop().animate({fill:'#303030'},300);
            };

See: http://jsfiddle.net/Eheqc/1/