jQuery toggleClass不会在列表项悬停时对svg折线进行动画处理

Question

我正在创建一个jQuery菜单，其中每个ul内都包含svg折线。 当li悬停在上方时，我希望孩子ul出现并且ul中包含的svg折线画出。

我尝试使用.toggleClass和.attr来更改svg的属性以及过渡。

jQuery

$("ul ul").hide();

$("li").hover(function() {
  $(this).children("ul").fadeToggle(250);
  $(".svg-twin").attr('class','svg-twin-drawn');
});

CSS

.svg-twin {
  stroke-dasharray: 165px;
  stroke-dashoffset: 165px;
}

.svg-twin-drawn {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s ease-in;
  fill: none;
  stroke: orange;
  stroke-width: 6;
  stroke-miterlimit: 10;
  display: block;
}

链接到小提琴 https://jsfiddle.net/spittman/pzLrw419/285/

通过在笔划偏移和笔划偏移具有不同值的类之间切换，我希望线条看起来像在画线一样。