gif 在鼠标悬停时开始播放并在鼠标移开时停止？

Question

我想要制作下面的 gif，它最初停止，但在悬停时开始播放，当鼠标移开时它会停止......任何人都可以帮助我吗？

Answer 1

在你的情况下，因为动画并不复杂，我的想法是在页面上放置两个图像（动画和非动画）。并在鼠标悬停/移出时显示/隐藏它们。

<div id="img_wrap" class="static">
    <img id="animated" src="animated.gif" alt="">
    <img id="static" src="static.jpg" alt="">
</div>

脚本：

$(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');
    })
})

CSS：

.animated #static, .static #animated {
    display: none;
}
.animated #animated, .static #static {
    display: inline;
}

或者，如果您不需要 IE6 的支持，您甚至可以使用纯 CSS 来完成此操作，它不会触发hover以下任何事件<a>：

CSS：

#img_wrap #static, #img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
    display: none;
}