Jquery 将css动画暂停在悬停状态，然后从点继续

我正在尝试在悬停时添加svg路径动画，并在mouseOut时反转动画

如果mouseOut在mouseOn动画完成之前，如何暂停动画，并从该关键帧反转动画

此外，如果动画正在反转，你在动画中间悬停，我希望反转动画停止，然后从那个点向前播放。

我还使用jquery向元素添加属性。我是否只需要使用css来完成此操作

$(document).ready(function() {
  $('svg').hover(function() {
    /* Stuff to do when the mouse enters the element */
    $(this).find('circle').fadeIn(100);
    $(this).find('circle').attr("class", "social-circle movingCirc");
    console.log('on');
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $(this).find('circle').attr("class", "social-circle removingCirc");
    $(this).find('circle').delay(1900).fadeOut(100);
    console.log("hover off");
  });
});

---

感谢您的帮助

我不知道

笔划dashoffset

动画“停止并反转”是否可以用纯CSS动画来完成，但这里有一个使用的解决方案

下面是javascript：

$(function() {
  var $svg = $('svg');
  var $circle = $('circle', $svg);

  $svg.hover(function() {
    /* Stuff to do when the mouse enters the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 0
      }, 2000);
  }, function() {
    /* Stuff to do when the mouse leaves the element */
    $circle
      .stop()
      .animate({
        'stroke-dashoffset': 900
      }, 2000);
  });
});

---

@我很乐意帮忙。你热情的感激使我高兴极了！