下鼠標懸停動畫滑動使懸停動畫運行再次

Question

下面是一個例子：

http://jsfiddle.net/jAThU/2/

var paper = Raphael("paper", 500, 500); 

var rect1 = paper.rect(0,0, 200, 200).attr({'fill':'#b90e0a'}); 
var rect2 = paper.rect(200,0, 200, 200).attr({'fill':'#86171d'}); 

var box1 = paper.rect(200,0, 100, 100).attr(
       {'fill':'#ffffff','stroke':'#000000','opacity':0} 
      ); 
box1.toBack(); 
var box2 = paper.rect(400,0, 100, 100).attr(
       {'fill':'#ffffff','stroke':'#000000','opacity':0} 
      ); 
box2.toBack(); 

var set1 = paper.set(rect1,box1); 
var set2 = paper.set(rect2,box2); 

set1.hoverset(paper, function() { 
    box1.toFront(); 
    box1.stop().animate(
     {'opacity':'1','transform':'t-50,0'}, 
     250, 
     "cubic-bezier(0.785, 0.135, 0.15, 0.86)" 
    ); 
}, function() { 
    box1.stop().animate(
     {'opacity':'0','transform':'t50,0'}, 
     250, 
     "cubic-bezier(0.785, 0.135, 0.15, 0.86)", 
     function() { box1.toBack(); } 
    ); 
}); 

set2.hoverset(paper, function() { 
    box2.toFront(); 
    box2.stop().animate(
     {'opacity':'1','transform':'t-50,0'}, 
     250, 
     "cubic-bezier(0.785, 0.135, 0.15, 0.86)" 
    ); 
}, function() { 
    box2.stop().animate(
     {'opacity':'0','transform':'t50,0'}, 
     250, 
     "cubic-bezier(0.785, 0.135, 0.15, 0.86)", 
     function() { box2.toBack(); } 
    ); 
}); 

懸停在紅色或栗色盒將導致更小的白盒中滑動

問題：如果將鼠標懸停在白色方框上，然後將鼠標移動到白色方框的右側，您將看到動畫滑動鼠標下的方框，觸發懸停功能再次。這會導致不希望的閃爍效果。

編輯：我仍然需要白盒上的指針事件，因爲它會有一些可點擊的信息。

我不知道如何解決這個問題。我試過在動畫上添加一個框，但是這個懸停在下面的框中不會生效。我嘗試添加延遲，但仍然有閃爍的效果。我試過解除懸停功能。

問題：如何消除這種閃爍效應？有任何想法嗎？

Answer 1

你可以在白盒禁用指針事件，所以

.box { 
    pointer-events: none; 
} 

box1.node.setAttribute("class", "box"); 
box2.node.setAttribute("class", "box"); 

jsfiddle