Raphaeljs動畫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

鼠標懸停動畫爲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/