Javascript Snap.svg动画完成后跳转

我只是将我的脚伸进svg的世界，并试图用Snap.svg来概括我的想法。只是想玩一下，我正在尝试使用Element.hover为垃圾桶的svg设置动画，但动画完成后，盖子会跳到不应该的地方

我发现Snap.svg文档严重不足，我也查看了Raphael.js文档，因为它们是由同一位作者编写的，但我不确定我是否做了错误的事情

以下是我的javascript：

var trashContainer = Snap('#trash'),
    trashLid       = trashContainer.select('#lid');

trashContainer.hover(
    function() {
        trashLid.animate({transform: 't0,-5'}, 1000, mina.elastic);
    },
    function() {
        trashLid.animate({transform: 't0,0'}, 500, mina.bounce);
    }
);

下面是一个JSFIDLE，它说明了问题，请尝试多次悬停：

---

有人能给我指出正确的方向吗？

问题是你有两个动画会冲突。将鼠标悬停在div上，鼠标悬停开始。然后将鼠标悬停在外侧，鼠标悬停将返回。但是，当您开始向后悬停时，动画在哪里？当中间动画和另一个悬停事件发生时，您需要考虑实际希望发生的事情的逻辑。你想让他们排队吗？如果只需要返回一半的距离，时间是否应该不同？这比人们意识到的要复杂得多，但一旦你确定了逻辑，编写处理程序就会更容易。@Ian我很感激你的回答，但我仍然看不到你在暗示什么。你介意用一个类似的例子来设置一个JSFIDLE吗？例如，第一个动画是1000毫秒长的。假设您在100毫秒后悬停，悬停动画将开始，长度为500毫秒。显然有冲突没有？您可能会注意到，如果您在悬停前离开至少1000毫秒，它将正常工作。我可能错了，但看起来事情就是这样。@Ian我想我理解你现在的想法，但我不确定这是不是一个真正的问题。根据我的理解，这很像使用jQuery的.hover方法，在这种情况下不需要这些预防措施。也许我误解了复杂性，但您的建议听起来更像是从头开始编写代码，而不是使用Snap.svg库。同样，如果你能为你的提议建立一个JSFIDLE，我相信它会更有意义。和往常一样，谢谢你的回复。我没有提出任何建议，只是强调了我预期的问题所在。