0

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

JS小提琴代码

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 个框。

4

1 回答 1

2

鼠标悬停动画比鼠标悬停动画长 200 毫秒，因此如果鼠标悬停和鼠标悬停的总时间少于 200 毫秒，动画将并行运行，鼠标悬停动画最后完成，留下红色。

相反，.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/

于 2012-10-02T05:29:27.627 回答