javascript - 如何在鼠标移出或悬停停止时停止图像切换

Question

我必须在鼠标悬停/悬停时不断在两个图像之间切换，并在悬停停止时停止相同，

我是这样做的

这是我的 HTML

<div class="fader">
  <img src="image1" />
  <img src="image2" />
</div>

这是我的 JQuery

    $('.fader').hover(function() {
      toggleImage();
    });

function toggleImage() {
 if($('.fader').is(":hover")) {
  $('.fader').find("img").fadeToggle(1000);
  toggleImage();
 }
}

我用过的一些 CSS 样式

.fader {
  display: inline-block;
}

.fader img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

我面临的问题是，我需要在 mouseout 或悬停停止时停止 toggleImage() 函数的无限循环。

我试着用 :hover 来检查

$('.fader').is(":hover")

但这行不通。

我必须在 mouseout/hovering 停止时停止无限循环。

有什么建议吗？

要获得更多帮助，请创建一个 fiddle

Answer 1

仅使用 Css:

* {
  margin: 0;
  padding: 0;
}
.fader {
  display: inline-block;
}
.fader img {
  transition: all .2s;
}
.fader img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.fader:hover img:first-child {
  animation: toggle .5s infinite alternate .5s;
}
.fader:hover img:last-child {
  opacity: 1;
  animation: toggle .5s infinite alternate;
}

@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="fader">
  <img src="http://placehold.it/200x200/fff000" />
  <img src="http://placehold.it/200x200" />
</div>