Question

我有这个代码，其中onmouseout和onmouseover事件的颜色发生了变化。但是，如果我将鼠标快速移动到这些框上，则onmouseover功能无法正常工作且不会更改颜色。可能是什么问题？

JS小提琴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);
        }
    }
}

*编辑：即使我快速移动鼠标，如何确保动画仅应用于1个框。

Answer 1

鼠标悬停动画比鼠标输出长200ms，因此如果鼠标悬停和鼠标输出总共少于200ms，则动画并行运行，鼠标移动最后完成，颜色保持红色。

相反，请在每个.stop()之前添加.animate，以阻止动画竞争：

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

请参阅：http://jsfiddle.net/Eheqc/1/

Raphaeljs动画onmouseout问题

1 个答案: