悬停并单击与动画 gif 的交互

Question

我有一个默认显示的标志。悬停时，我想显示另一张图片。单击时我想显示第三张图片，这是一张动画 gif。

这一切都正常，但我需要适当的延迟，以便动画 gif 可以运行完全，即使悬停丢失。我尝试了很多东西但没有快乐。这是代码：

    $(function() {
        $(".logo img").hover(
            function() {
                $(this).attr("src", "http://[URL]/images/logo-hover.png");
            },
            function() {
                $(this).attr("src", "http://[URL]/images/logo.png");
            }                         
        ); 
    });        

    $(function() {
        $(".logo img").click(
            function() {
                $(this).attr("src", "http://[URL]/images/logo-animate.gif");
            }                         
        ); 
    });

Answer 1

制作一个 div or 和 iframe，将图像放在彼此之上并通过 jQuery animate

控制它们的 zIndex 和不透明度

Answer 2

您可以为此使用 CSS：

.element { content:url("img1") }
.element:hover { content:url("img2") }
.element.clicked { content:url("img3") }

而在 JS 中，只需在需要时添加和删除 clicked class。

工作示例：http://jsfiddle.net/4c0uzhh8/1/

Answer 3

替代方案（注意点击后动画会继续运行）

取消绑定 mouseenter 和 mouseleave 单击事件。

$(function() {
    $(".logo img").click(
        function() {
            $(this).attr("src", "http://[URL]/images/logo-animate.gif");
            $(this).unbind('mouseenter mouseleave');
        }                         
    ); 
});

Fiddle

悬停并单击与动画 gif 的交互

hover and click interaction with animated gif

jquery

hover

animated