Как сделать перезапуск gif при наведении?

Question

[denism300]

Есть незацикленная gif анимация, которая активируется при наведении мыши.
сделано это примерно так.

<a class="gif" href="#"><img src="animation.gif" alt="" /></a>

.gif {
    display: block;
    background: url('stat.gif') no-repeat;
}

a.gif img {
    visibility: hidden;
}

a.gif:hover {
    background: none;
}

a.gif:hover img {
    visibility: visible;
    border:0;
}

понятно, что срабатывает она только 1 раз при первом наведении курсора. а как ее заставить анимировать заново при каждом наведении курсора?

Answer 1

[Andrew]

Looping is encoded into the GIF itself, not the img tag. Open the GIF in an image editor and change the mode to loop, or use a different GIF. The loop attribute is an invalid, deprecated attribute only meant to work when the src is a video.

Отсюда
Можете поиграться с загрузкой изображения заново, каждые 2 секунды после hover'а, но лучше за'loop'те gif'ку.

Comments

[denism300]

за 'loop' ить не вариант, анимация должна при наведении прокрутиться и остановиться. при следующем наведении повториться.

[Andrew]

denism300,

let imgSrc = 'animation.gif'
$('.gif').hover(function() {
$(this).hasClass('hovered')?console.log('already hovered'):$(this).addClass('hovered');
$(this).find('img').attr('src',imgSrc);
});

.gif {
    display: block;
    background: url('stat.gif') no-repeat;
}
.gif img {
    visibility: hidden;
}
.gif .hovered {
background: none;
}
.gif .hovered img {
    visibility: visible;
    border:0;
}