jquery toggleClass не будет анимировать svg ломаную при наведении на элемент списка - PullRequest
Новая
       13

jquery toggleClass не будет анимировать svg ломаную при наведении на элемент списка

0 голосов
/ 12 апреля 2019

Я создаю меню jQuery, в котором есть полилинии svg внутри каждого ul. Когда li наведен на меня, я бы хотел, чтобы дети ul появились, а полилиния svg, содержавшаяся внутри ul, была бы выделена.

Я пытался использовать .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/

Переключая между классами, которые имеют разные значения для смещения штрихов и смещения штрихов, я ожидал, что линии будут выглядеть так, как будто они рисуют.

...