Snap.svg hover/unhover 错误（悬停时间更长）

Question

如果我画一个圆然后像这样制作动画 - 一切正常：

  var s = Snap(200,200);
  var c = s.circle(100,100,100);

  c.hover(function(){
  c.animate({fill:"red"}, 500, mina.easeinout);
  }, function() {
  c.animate({ fill:"black" }, 500, mina.easeinout);   
  });

悬停时颜色变为红色，"unhover" 时颜色变回黑色。但是，如果我将第二个功能（取消悬停）中的时间设置为 1500 而不是 500，您会注意到，如果您将鼠标悬停在圆圈上，然后在不到 1.5 秒（在圆圈再次变黑之前）之前取消悬停并再次悬停 - 它会动画变为全红色，然后在没有动画的情况下迅速变黑。这是演示： https://jsfiddle.net/Drasik/5bcu4rc5/1/

为什么会发生这种情况，我该如何解决？谢谢！

Answer 1

变黑的动画仍然是运行ning，所以如果你在悬停后再次悬停 500 毫秒，你告诉它在 500 毫秒后变红，然后在 1000 毫秒后再次变黑（我认为浏览器感到困惑，因此突然。

为避免这种情况，您可以尝试在悬停返回时停止淡入淡出的黑色动画，如下所示 (https://jsfiddle.net/5bcu4rc5/3/):

c.hover(function(){
    c.stop(); // stops the black fill from continuing
    c.animate({fill:"red"}, 500, mina.easeinout);
}, function() {
    c.animate({ fill:"black" }, 1500, mina.easeinout);
});

如果你想在红色填充开始之前将完整的 1500 毫秒强制到运行，也许是这样的（尽管可能有更好的方法：https://jsfiddle.net/5bcu4rc5/2/）：

c.hover(function(){
    if (c.className != "unhovering") {
        c.animate({fill:"red"}, 500, mina.easeinout);
    }
}, function() {
    c.className = "unhovering";
    c.animate({ fill:"black" }, 1500, mina.easeinout, function() {
        c.className = "";
    });
});

Snap.svg hover/unhover 错误（悬停时间更长）

Snap.svg hover/unhover bug (for longer unhover)

javascript

svg

snap.svg