下鼠标悬停动画滑动使悬停动画运行再次

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