Question

以下是一个例子：

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

悬停鼠标下的动画幻灯片，导致悬停动画再次运行

1 个答案: