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()函数的无限循环。

我试图检查：用

悬停

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

但这不起作用。

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

有什么建议吗？

获取更多帮助，创建了一个fiddle

Answer 1

您可以使用与此类似的setInterval和clearInterval：

var toggleTimer;

$('.fader').hover(function() {
  toggleTimer = setInterval(toggleImage, 1000)
}, function() {
  clearInterval(toggleTimer)
});

function toggleImage() {
  $('.fader').find("img").fadeToggle(1000);
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fader">
  <img src="http://lorempixel.com/200/200" />
  <img src="http://lorempixel.com/200/200" />
</div>

Answer 2

仅使用Css：

＆＃13;

* {
  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;
  }
}

＆＃13;

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

＆＃13;

Answer 3

请尝试这样

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

    function toggleImage() {
        $('.fader').find("img").fadeToggle(1000);
      //toggleImage(); //Comment this code
    }

Answer 4

var interval;
$('.fader').hover(function() {
    interval = window.setInterval(toggleImage(), 2000);
});

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

Answer 5

你需要在jquery代码中加载效果之后使用return false;。

＆＃13;

$('.fader').hover(function() {
    toggleImage();
});

function toggleImage() {
	$('.fader').find("img").fadeToggle(1000);
	return false;
  toggleImage();
}

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<div class="fader">
    <img src="http://placehold.it/300x300/000fff" />
    <img src="http://placehold.it/300x300/fff000" />
</div>

＆＃13;

如何在mouseout或悬停stopes时停止图像切换

5 个答案: