需要在悬停时主动操作并在 7 秒内返回原始状态

Question

我正在开发一个包含少量动画效果的网站。

我需要在悬停时激活 gif（动画），然后一旦 courser 关闭，它将再次静止。
鼠标悬停时，我需要 Image1 消失并显示 image2 然后一旦鼠标离开，image1 将在 7 秒后再次出现。

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

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

Answer 1

您可以尝试类似的方法：

$("#myStaticImage").mouseenter(function(){

$("#myHiddenGif").fadeIn().delay(7000).fadeOut()

})

编辑：使用 mouseenter 而不是 hover 效果更好

hiddenGif 应该在静态 Gif 之上，但有显示：none

在这里查看我的示例：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"
});

需要在悬停时主动操作并在 7 秒内返回原始状态

Need to active action on hover and back to original in 7 seconds

javascript

css

jquery

animation

gif