How to stop image toggling on mouseout or when hover stopes

Question

I have to keep toggling between two images on mouseover/hover and stop the same when hovering stops,

That I did as

Here is my HTML

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

Here is my JQuery

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

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

Some CSS I have used for styling

.fader {
  display: inline-block;
}

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

Issue I am facing is, I need to stop my infinite loop of toggleImage() function on mouseout or when hovering stops.

I tried to check :hover with

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

But that doesn't works.

I have to stop infinite loop on mouseout/hovering stops.

Any suggestions?

for more help created one fiddle

Answer 1

Using Css only:

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

Answer 2

You can use setInterval and clearInterval similar to this:

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 3

Please try like this

  $('.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

You need to use return false; after load effect in jquery code like this.

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

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

.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/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>