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);   
  });

它会在悬停时将颜色更改为红色，并在＆＃34; unhover＆＃34;它又回到了黑色。但是如果我在第二个功能（取消悬停）1500而不是500中花时间，你会注意到如果你将鼠标悬停在圆圈上，然后在不到1.5秒的时间内（在圆圈之前）取消悬停并将其悬停在AGAIN之前再次黑色） - 它将动画为全红色，快速变黑，没有动画。这是演示： https://jsfiddle.net/Drasik/5bcu4rc5/1/

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

Answer 1

黑色的动画仍然在运行，所以如果你在徘徊后再徘徊500ms，你会告诉它在500ms内变成红色，然后在1000ms内再次变黑（我认为浏览器会混淆，因此突发性）。

为避免这种情况，您可以尝试在重新悬停时停止淡入淡出动画，如下所示（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悬停/取消悬停错误（更长时间的悬停）

1 个答案: