Raphaeljs 动画 onmouseout 问题答案

【问题标题】：Raphaeljs animate onmouseout issueRaphaeljs 动画 onmouseout 问题
【发布时间】：2012-10-02 05:25:36
【问题描述】：

我有这段代码，其中 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 个框。

【问题讨论】：

标签： jquery-animate raphael onmouseover onmouseout

【解决方案1】：

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

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

            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/

【讨论】：