0

I've searched around different posts but still can't understand what to do entirely.

Here is my setInterval code for a slider. As it's a slider the interval begins on page load. Once I mouseleave the interval speed is faster, which means I have two going on at the same time I'm assuming, however I'm not sure how to smoothly stop it at mouseenter and get it going again at the same pace on mouseleave.

var interval = setInterval(slideInterval, 4500);

$('.main-container').on('mouseenter', function(){
    clearInterval(interval);

});
, $('.main-container').on('mouseleave', function() {
    setInterval(slideInterval, 4500);
});
Meds86
  • 27
  • 4
  • maybe because you are not assigning setInterval to interval on mouseleave – fedetibaldo Aug 20 '16 at 15:34
  • Possible duplicate of [Pausing CSS animation with javascript and also jumping to a specific place in the animation](http://stackoverflow.com/questions/22080548/pausing-css-animation-with-javascript-and-also-jumping-to-a-specific-place-in-th) – guest271314 Aug 20 '16 at 15:37

1 Answers1

0

its because when you leave the element you creating a new interval without a var assigment for clearing it next.

and its will produce more and more intervals on same DOM Element. heres the fixed code:

var A = document,
    B = window,
    a = 0,
    b = function(c){return A.getElementsByTagName(c)[0]},
    d = setInterval(function(){b('div').innerHTML = ++a;}, 1000);
b('div').onmouseover = function(){clearInterval(d);}
b('div').onmouseleave = function (){d = setInterval(function(){
  b('div').innerHTML = ++a;
}, 1000);}
div{width:500px;height:150px;border:1px solid black;}
<div></div>

i did it compcted in javascript without jquery

Baruch B.
  • 13
  • 1
  • 5
  • This works but only for the first time i mouseenter and mouseleave. The mouseenter won't recognize second time. I'm guessing because the setinterval in the mouseleave function is out of the scope of the mouseenter clearinterval. Not sure how to advance further – Meds86 Aug 20 '16 at 18:30