Raphaeljs animate onmouseout 문제

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

마우스 오버 애니메이션의 길이가 mouseout보다 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/

완벽한