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

Question

我有两个与附件相似的一次性 GIF。我想让第一个 GIF 在鼠标悬停时替换原始的 PNG，但即使有人从图像中移除光标，也完成播放 GIF，以便最后一帧在 mouseout GIF 之前就位，这与前一个相反一、更换播放。我还希望原始 PNG 也能在播放完毕后替换 mouseout GIF。所以，original > mouseover 足够长的时间播放完 > mouseout 足够长的时间播放完 > original.

我尝试了在这里找到的 javascript，它可以替换图像，但鼠标悬停 GIF 时不时地播放（即使光标仍在其上），即使它是播放一次的 GIF（脚本必须不断刷新 GIF 或其他内容）。

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

感谢您的帮助！

mouseover GIF mouseout GIF original PNG

预计到达时间：这是我之前尝试过的，虽然这不是最终版本，因为我在那个网站上尝试了不同的东西，让你可以尝试脚本，我想我把时间设置为 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>
-->

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

Script for Mouseover to let GIF finish before Mouseout GIF can begin?

javascript

jquery

mouseover

mouseout