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不会动起来悬停

回答

相关问题