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

我有一个默认显示的标志。徘徊时，我想显示另一个图像。点击时，我想显示第三个图像，这是一个动画gif。悬停并点击与动画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"); 
      }       
     ); 
    });

来源

2015-10-18 Rob H

推测的延迟之后，你想要的悬停动作重新工作？ –

让一个div或者和iframe，把图像在彼此并控制其zIndex的，并通过jQuery的不透明度动画

来源

2015-10-18 21:21:41 Noctisdark

这是如何回答这个问题的？ –

您可以使用CSS这样的：

.element {含量：URL（ “IMG1”）}
.element：悬停{含量：URL（ “IMG2”）}
.element.clicked {含量：URL（ “IMG3”）}

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

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

来源

2015-10-18 22:10:06 Dee

替代的解决方案（注意动画将继续点击后运行）

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

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

Fiddle

来源

2015-10-18 22:20:43

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

回答

相关问题