在鼠标悬停和鼠标悬停时启动/停止gif

Question

当访客将图像悬停时，我正在尝试开始制作GIF动画，而我实际上是通过以下方式完成的：

$(document).ready(function() {
  $(".lazy[title='img-static']").hover(function() {
    $(this).attr("src", "https://www.website.com/wp-content/uploads/img-static.png");
  }, function() {
    $(this).attr("src", "https://www.webco.dk/wp-content/uploads/img-animation.gif");
  });
});

它将图像从静态PNG更改为动画GIF，但是当鼠标离开时，我需要将其切换回静态。

我还听说我应该预先加载GIF，您将如何做？

感谢您的帮助。

Answer 1

尝试使用mouseenter（）/ mouseleave（）代替，

$(".lazy[title='img-static']").mouseenter(function() {
    $(this).attr("src", "https://www.website.com/wp-content/uploads/img-static.png");
});
$(".lazy[title='img-static']").mouseleave(function() {
    $(this).attr("src", "https://www.webco.dk/wp-content/uploads/img-animation.gif");
});