0

onmouseoutイベントと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 に答える