懸停並點擊與動畫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的互動

回答

相關問題