Mouseover的脚本让GIF在Mouseout GIF开始之前完成

Question

我有两个类似于附件的一次性播放GIF。我想让第一个GIF在鼠标悬停时替换原始PNG，但即使有人从图像中删除光标，也要完成GIF的播放，这样最后一帧就在鼠标悬停GIF(与前一帧相反(替换并播放之前。我也希望原始的PNG在播放结束后取代鼠标输出的GIF。所以，原创>鼠标悬停足够长以完成播放>鼠标移出足够长的时间以完成播放>起初的

我尝试了在这里找到的一个javascript，它可以替换图像，但鼠标悬停GIF不时地播放(即使光标还在上面(，尽管它是一个播放一次的GIF(脚本一定一直在刷新GIF或其他什么(。

当然，我会将脚本保存在一个外部文件中，而不是内联。我知道足够多的javascript来编辑脚本，但不能从头开始编写。如果需要，jQuery是可用的。

谢谢你的帮助！

mouseover GIF mouseout GIF原始PNG

ETA：这是我以前尝试过的，尽管这不是它的最终版本，因为我在那个网站上尝试了不同的东西，可以让你在上面尝试脚本，我想我把时间设置为2888。我没有其他脚本，因为我没有保存它：

$(".as-panel[data-index='0']").mouseover(function() {
$(this).find("img").attr('src','/bouncing-balls.gif');

});
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}

$(".as-panel[data-index='0']").mouseout(function() {
// `this` is the DOM element that was clicked
pausecomp(500);     
$(this).find("img").attr('src','/bouncing-balls-reverse.gif');

});

Answer 1

我猜动画会持续大约3秒，但你可以改变这一点。使用setTimeout和几个布尔值，我们可以延迟鼠标的打开或关闭操作，并排队等待下一个操作。我还在一开始就预加载图像，以平滑任何加载闪烁。

const imgs = ["https://i.stack.imgur.com/02MSs.gif", "https://i.stack.imgur.com/0rYVD.gif", "https://i.stack.imgur.com/GOdZ0.png"];
imgs.forEach((img, i) => {
this["image" + i] = new Image();
this["image" + i].src = img;
})
let imgtimer, allclear = true,
nextEvent = null
$('#imghover').mouseover(imgMo).mouseout(imgMo)
function imgMo(e) {
if (!allclear) {
if (!nextEvent) nextEvent = e
else nextEvent = null
return
}
$("#imghover").attr('src', e.type === "mouseover" ? imgs[0] : imgs[1]);
allclear = false;
imgTimer = setTimeout(function() {
allclear = true;
if (nextEvent) imgMo(nextEvent);
nextEvent = null
}, 3000)
}

#mo {
padding: 20px;
background: #f0f0f0;
text-align: center;
margin-top: 10px;
}
html {
background: #000;
padding: 20px;
}
img {
border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='showimg'>
<img id='imghover' src='https://i.stack.imgur.com/GOdZ0.png' />
</div>
<!--
<div id='mo'> Mouse over and out on this text to see the image change</div>
-->