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

您可以使用CSS：

.element {content：url（＆＃34; img1＆＃34;）}
.element：hover {content：url（＆＃34; img2＆＃34;）}
.element.clicked {content：url（＆＃34; img3＆＃34;）}

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

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

Answer 2

备用解决方案（请注意点击后动画将继续运行）

点击时取消绑定mouseenter和mouseleave个事件。

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

Fiddle

Answer 3

创建一个div或iframe，将图像放在彼此上并通过jQuery animate控制它们的zIndex和不透明度

悬停并点击与动画gif的互动

3 个答案: