Question

我一直试图在悬停时运行gif，但我取得了一些成功。以下是我的代码。目前，当鼠标指向图像时，gif仅在悬停时运行。当鼠标指向分区中的任何位置时，我怎么能使图像在悬停时发生变化。

脚本

var imageSwap = function () {
var $this = $(this);
var newSource = $this.data('swap');
$this.data('swap', $this.attr('src'));
$this.attr('src', newSource);}$(function () {   '.playgif').hover(imageSwap, imageSwap);});

代码

<div class="col-sm-4 thumb text-center animate">
  <h3 class="green">Punktuell</h3>
  <div class="image"><img data-swap="images/punktuell.gif" src="images/punktuell.jpg" /></div>
  <p class="last">Wir engagieren uns fokussiert in  <br>unterschiedlichen Bereichen, <br>z.B. in Form von Workshops,  <br>Zielgruppenstrategien oder<br> Trendanalysen.</p>
</div>

Answer 1

你的剧本有点没用。您应该使用mouseout和mouseover个活动。

＆＃13;

$(function () {
  $(".playgif").hover(function () {
    var stat = $(this).find("img").attr("src");
    $(this).find("img").attr("src", $(this).find("img").data("swap"));
    $(this).find("img").data("swap", stat);
  })
});

＆＃13;

.image {background: #ccf;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="col-sm-4 thumb text-center animate playgif">
  <h3 class="green">Punktuell</h3>
  <div class="image"><img data-swap="https://media.giphy.com/media/bPWyTsy2huZji/giphy.gif" src="http://i.imgur.com/hLe61Hi.gif?1" /></div>
  <p class="last">Wir engagieren uns fokussiert in <br>unterschiedlichen Bereichen, <br>z.B. in Form von Workshops, <br>Zielgruppenstrategien oder<br> Trendanalysen.</p>
</div>

＆＃13;

我添加了一个浅蓝色背景，向您展示<div>的覆盖范围。

Answer 2

不要在jQuery 3+中使用.hover()它已被弃用。请改用'mouseleave mouseenter'。

演示

＆＃13;

$('.thumb').on('mouseleave mouseenter', imgSwap);

function imgSwap(e) {
  var img = $(this).find('img');
  var png = `http://i.imgur.com/68lj2z6.png`;
  var gif = img.data('swap');
  img[0].src === png ? img[0].src = gif : img[0].src = png;
}

＆＃13;

.thumb {
  border: 1px dotted red;
  width: 300px;
}

＆＃13;

<div class="col-sm-4 thumb text-center animate">
  <h3 class="green">Punktuell</h3>
  <div class="image"><img data-swap="http://i.imgur.com/DheohWR.gif" src="http://i.imgur.com/68lj2z6.png" width='250' /></div>
  <p class="last">Wir engagieren uns fokussiert in <br>unterschiedlichen Bereichen, <br>z.B. in Form von Workshops, <br>Zielgruppenstrategien oder<br> Trendanalysen.</p>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 3

为什么不使用CSS呢？处理gif更简单，更简单。看一下代码：

<style>
.Homer {
height:165px;
width:140px;
background: url('URL-of-static-image');
margin:auto; /*position the [div] on the center*/
}
/*this is the hover event trigger*/
.Homer:hover {
cursor:pointer; 
background:url('URL-of-animated-GIF');
}
</style>

对于html：

<div class="Homer"></div>

将**本垒打**替换为您的特定班级。

在悬停时运行gif

3 个答案:

演示