Stopping jQuery cycle function on hover
<p>I have a function called <code>testimonials()</code> that basically cycles through a set of divs, whereas it animates a div in, animates it out and animates the next one in.</p>

<p>Now, I wanted to make it stop on the current DIV once the mouse is on it, otherwise known as hovering it. And I've made it work using a code I got from another post in this site, I was just wondering if someone could explain it to me because I'm a little new to jQuery and I really want to understand why it is working.</p>

<p>The code is the following:</p>

<pre><code>function testimonials() {
    //function here
}

//to stop on hover

var timerId = null;

function startRotation() {
    if (timerId) {
        return;
    }
    timerId = setInterval('testimonials()', 5000);
}

function stopRotation() {
    if (!timerId) {
        return;
    }
    clearInterval(timerId);
    timerId = null;
}

$(function () {
    startRotation();
    $('.testimonials').hover(stopRotation, startRotation);
});
</code></pre>
