需要在悬停时激活动作，并在7秒内返回到原始状态

Question

我正在开发一个几乎不包含动画效果的网站。

1. 我需要在悬停时激活gif（动画），然后一旦课程关闭，它将再次是静态的。

2. 悬停时，我需要图像1消失并显示图像2，然后鼠标离开后，图像1将在7秒后再次出现。

前任。Image1是一台带窗帘的电视，一旦鼠标放在上面，Image1就会消失并显示image2，7秒后，Image1会再次出现。

实现这一目标的最佳方法是什么？

Answer 1

您可以尝试以下操作：

$("#myStaticImage").mouseenter(function(){
$("#myHiddenGif").fadeIn().delay(7000).fadeOut()
})

编辑：它使用鼠标输入而不是悬停效果更好

隐藏Gif应该在静态Gif之上，但有显示：无

在这里查看我的示例：JS fiddle

jQuery.delay（）

Answer 2

您可以使用jquery这样做：

$("#your_image_id").mouseenter(function(){
    $(this).attr('src')="http://some-gif-img-source"
});
$("#your_image_id").mouseleave(function(){
    $(this).attr('src')="http://static-img-source"
});