Поочередное анимация Jquery?

Question

[furcifer]

Здравствуйте! Подскажите пожалуйста , как сделать последовательное бесконечное выполнение анимации, сначала идет первая, потом вторая и тд. При клике на любой из элементов анимация должна начинаться с него (делаю кнопки навигации для слайдера)
https://jsfiddle.net/furcifer21/t6pkh2s0/1/
Заранее огромное спасибо!!

Answer 1

[0xD34F]

Так:

$('body').html(Array.from({ length: 4 }, (n, i) => `
  <svg width="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <circle class="border" cx="20" cy="20" r="18"/>
    <circle class="fill" cx="20" cy="20" r="18"/>
    <text x="12" y="25" class="small">0${i + 1}</text>
  </svg>
`));


const $elements = $('.fill');

function animateElem(index) {
  $elements.removeClass('animation').eq(index).addClass('animation');
}

$(document).on('animationend', function(e) {
  $(e.target).removeClass('animation');
  const index = (1 + $elements.index(e.target)) % $elements.length;
  animateElem(index);
});

$(document).on('click', 'svg', function(e) {
  animateElem($elements.index($('.fill', this)));
});

.border {
  fill: transparent;
  stroke: #ccc;
  stroke-width: 2px;
}

.fill {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transform: rotate(-90deg);
  transform-origin: center;
}

.animation {
  animation: spin 2s both linear;
}

@keyframes spin {
  to {
    stroke-dashoffset: 1;
  }
}

??

Comments

[furcifer]

Да, спасибо!!!!!!!!!!!!!
Только как сделать чтобы оно само запускалось, без клика?

[0xD34F]

Очевидно же - надо вызвать метод animateElem, передав индекс элемента, который хотите анимировать. Например: animateElem(0);.

[furcifer]

0xD34F, чего то не выходит!?

[0xD34F]

чё?

[Gor321]

где его вызывать? не понимаю, подскажите

[0xD34F]

В самом конце.