Gif不會動起來懸停

我看到這篇文章，我試圖複製代碼：Stop a gif animation onload, on mouseover start the activation。我似乎無法讓它工作。我的目標是將圖像與懸停時的gif進行交換。有人知道圖像不交換的原因嗎？Gif不會動起來懸停

$(document).ready(function() { 
 
    $("#imgAnimate").hover(
 
    function() { 
 
     $(this).attr("src", "images/portfolio/form.gif"); 
 
    }, 
 
    function() { 
 
     $(this).attr("src", "images/portfolio/form.jpg"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="large-12 medium-12 small-12 columns portfolio-pic animated slideInUp"> 
 
    <div data-content="Project 1" class="image"> 
 
     <a class="a-block" href="#"> 
 
     <img id="imgAnimate" src="images/portfolio/form.jpg"> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

這裏是一個活鏈接到我的例子：http://fosterinnovationculture.com/dcc/index.html

來源

2016-06-29 marcos

將jquery添加到您的頁面 – madalinivascu

@anthony將答案寫爲答案而不是編輯。它只是混亂，你不賺任何學分;） – doniyor

我不知道我的編輯會解決它，我所做的只是添加jQuery：P但是我明白，謝謝。我刪除了我的答案。 –

從你的頁面是說jQuery是不確定的。所以無論你是否試圖在jQuery執行前執行jQuery代碼。

我執行您的站點上的代碼只是爲了測試的東西出來，似乎是工作

function mousein() { 
 
    $(this).attr("src", "images/portfolio/form.gif"); 
 
    console.log('hello') 
 
} 
 

 
function mouseout() { 
 
    $(this).attr("src", "images/portfolio/form.jpg"); 
 
} 
 

 
console.log($('#imgAnimate').hover(mousein, mouseout));

我也注意到，雖然因爲一些樣式問題懸停從來沒有真正擊中img它實際上擊中了.image:after css psuedo選擇器，因此您需要重新組織您的html或更改您選擇要切換src的元素的方式。

只是在你的HTML測試移動圖像之外的 <div class="image">image</div>

來源

2016-06-29 05:10:37 Enjayy

是其正確的@madalin ivascu爲告知，你需要在頭部添加jQuery和它的工作。

這樣，

HTML

<head> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#imgAnimate").hover(
    function() { 
     $(this).attr("src", "banana.gif"); 
    }, 
    function() { 
     $(this).attr("src", "banana.png"); 
    }); 
}); 
</script> 
</head> 


<body> 
    /* include your html part here */ 
    <a class="a-block" href="#"> 
     <img id="imgAnimate" src="banana.png" alt=""> 
    </a> 

</body>

來源

2016-06-29 05:06:50

我在標題中添加了JQuery引用，但它仍然不起作用。這裏是更新的例子：（http://fosterinnovationculture.com/dcc/index.html） – marcos

@marcos在這裏檢查這個小提琴https://jsfiddle.net/azt2yhu6/1/其工作 –

試試這個，而不是使用hover，儘量在使用mouseenter和mouseleave。

$(document).ready(function(){ 
    $(".row").find('img').mouseenter(function(){ 
    if($("#imgAnimate").attr('src','form.jpg')){ 
     $("#imgAnimate").attr('src','form.gif'); 
    } 
    $(this).mouseleave(function(){ 
     if($("#imgAnimate").attr('src','form.gif')){ 
     $("#imgAnimate").attr('src','form.jpg'); 
    } 
    }); 
    }); 
});

來源

2016-06-29 05:13:29 frnt

Gif不會動起來懸停

回答

相關問題