CODEWITHSUNDEEP
jquery
Zach Ioannou
Zach Ioannou

Reputation: 766

jquery stop infinite animation on mouseout

I have 4 divs that fade in indefinitely based on mouseover of another div, this is all fine. However i would like the animation to stop on the mouseout but this doesn't seem to work. 

$("#live").mouseover(function() {
  fadeloop('#live-step1', 100, 200, true);
  fadeloop('#live-step2', 100, 200, true)
  fadeloop('#live-step3', 100, 200, true);
  fadeloop('#live-step4', 100, 200, true);
});

$("#liveMusic").mouseout(function() {
  fadeloop('#live-step1', 100, 200, false);
  fadeloop('#live-step2', 100, 200, false);
  fadeloop('#live-step3', 100, 200, false);
  fadeloop('#live-step4', 100, 200, false);
});

function fadeloop(el, timeout, timein, loop) {
  var $el = $(el),
    intId, fn = function() {
      $el.fadeOut(timeout).fadeIn(timein);
    };
  fn();
  if (loop) {
    intId = setInterval(fn, timeout + timein + 100);
    return intId;
  } else {
    clearInterval(intId);
  }
  return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="height:550px;width:550px;">
  <div id="live" style="width:50px;height:50px;;background-color:gray">hover</div>
  <div id="live-step1" style="width:50px;height:50px;background-color:#ffffff">step1</div>
  <div id="live-step2" style="width:50px;height:50px;background-color:#ffffff">step2</div>
  <div id="live-step3" style="width:50px;height:50px;background-color:#ffffff">step2</div>
  <div id="live-step4" style="width:50px;height:50px;background-color:#ffffff">step4</div>
</div>

https://jsfiddle.net/uosww7bm/2/

Upvotes: 2

Views: 127

Answers (2)

sissy
sissy

Reputation: 2988

I can see couple of errors in your code:

  • why are you using two different selectors to trigger the event: on mouse over is #live, for the mouseout is #liveMusic (which I cannot see in the snippet).

  • secondly, you call fn() outside the if/else condition, so it will be continuously called even though you are clearing the timeout.

I've updated your snippet, using only one div, but result would be the same even with the others. 

    $("#live").mouseover(function() {
  fadeloop('#live-step1', 100, 200, true);
});

$("#live").mouseout(function() {
  fadeloop('#live-step1', 100, 200, false);
});
var intId;
function fadeloop(el, timeout, timein, loop) {

  var $el = $(el),
     fn = function() {
      $el.fadeOut(timeout).fadeIn(timein);
    };
  if (loop) {
    intId = setInterval(fn, timeout + timein + 100);
  } else {
    clearInterval(intId);
  }
  return false;
}

Check it out here updatedFiddle

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

When it comes to the UI, it's far more preferable to use CSS where possible. As such, you can achieve this using a keyframe animation along with the :hover pseudo selector. This gives you the 'pause on mouseout' behaviour by default.

Also note that you should remove the inline styles and place them in an external stylesheet, something like this:

@keyframes fadeAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

body { background-color: #EEE; }

.container {
  height: 550px;
  width: 550px;
}

.container div {
  width: 50px;
  height: 50px;
  background-color: #FFF;
}

.container #live {
  background-color: gray;
}

.container #live:hover ~ div {
  animation: fadeAnimation .4s infinite;
}
<div class="container">
  <div id="live">hover</div>
  <div>step1</div>
  <div>step2</div>
  <div>step2</div>
  <div>step4</div>
</div>

Upvotes: 2

Related Questions