Set and Clear interval slider jQuery

Question

I'm trying to make a simple two image slider that auto slides up and down. When the user hovers into it it should stop and if he/she hovers out of it, it continues to function normally. I tried using set and clearInterval but the slider doesn't pause on hover. How should I write the code to make it work?

var $Slides = $("#EServices"); //Or var $Slides = $("#Serv-Slides");
var interval;
function StartSlider() {
interval = setInterval(function () {
        $("#Serv-Slides").animate({ "marginTop": "0px" }, 200).delay(2000);
        $("#Serv-Slides").animate({ "marginTop": "-150px" }, 200).delay(2000);
    });
}

function StopSlider() {
    clearInterval(interval);
}

$Slides.on('mouseenter', StopSlider).on('mouseleave', StartSlider);
StartSlider();

Answer 1

There is two main problems here:

1. clearInterval does not stop jquery 's animation, it will just stop your setInterval calls so that no further animation are added in the queue. Every animations that you already piped and that are still pending will still be run. It will stop when all of them are finished.

2. You did not provided any given time for your setInterval . As a result, the provided function will be repeatedly called as fast as your browser can. This is a terrible mistake because you will end up with a massive amount of pending animations in the queue. You are piping new animations much much faster than they are actually consumed.

This should work:

 var interval; function startSlider() { function animate(){ $("#Serv-Slides").animate({ "marginTop": "0px" }, 200).delay(2000) .animate({ "marginTop": "-150px" }, 200); //.delay(2000); // Last delay is useless, it is managed by the setInterval. } // Start the first animation right now. animate(); // Set an interval that matches the animations and the delays duration. interval = setInterval(animate, 200 + 2000 + 200 + 2000); } function stopSlider() { // Avoid any further animation to be added. clearInterval(interval); // Stop the currently running animations. $("#Serv-Slides").stop(true); } $("#Slides").on('mouseenter', stopSlider).on('mouseleave', startSlider); startSlider(); 

 #Slides{ background-color:yellow; padding-top: 150px; height: 20px; } #Serv-Slides{ background-color: red; height: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="Slides"> <div id="Serv-Slides"></div> </div> 

You may also consider using css animations with @keyframes instead. Using the :hover pseudo-class you don't even need any JavaScript. This is likely to be more performant and I personally find it more elegant, easier and more flexible. Here is an example (you may need to add css prefixes for older browsers' support):

 #Slides{ background-color:yellow; padding-top: 150px; height: 20px; } #Serv-Slides{ background-color: red; height: 20px; animation-duration: 4s; animation-name: up-and-down; animation-iteration-count: infinite; } #Slides:hover #Serv-Slides{ animation-play-state: paused; } @keyframes up-and-down { 0% { margin-top: 0px; } 45% { margin-top: 0px; } 50% { margin-top: -150px; } 95% { margin-top: -150px; } } 

 <div id="Slides"> <div id="Serv-Slides"></div> </div>