pause jquery animation on hover, stop on click
<p>I'm trying to make a webpage where a set of DIVs cycles from top to bottom (see fiddle). And then whenever you hover a certain part of the div (in this case, the STOP link), the animation stops then plays again on mouseout. What I'm lacking right now is a way to stop the animation whenever that STOP link has been clicked. I've added a stop function on the link but it won't work. There might have been a conflict or some sort with the hover function I've made.</p>

<p>Thanks in advance for the help and sorry for the noobish question.</p>

<p>Link to the fiddle: <a href="http://jsfiddle.net/Psp9R/" rel="nofollow">http://jsfiddle.net/Psp9R/</a></p>

<p>Jquery:</p>

<pre><code>$(document).ready(function() {

$(".row").last().addClass("last");
$(".mholder").each(function() {
    var i = 0;
    $(this).find(".row").each(function() {
        var $this = $(this);
        $this.css("bottom", i);
        i += $this.height();
    });
});

// PLAY AND STOP
$('#start').click(function() {
    $("#overlay").hide();
    var countScrolls = $('.mholder .row').length;

    for (var i=0; i &lt; countScrolls; i++) {
       doScroll($('.mholder .row:nth-child(' + i + ')'));
    }
});

$('.stop').click(function() {
    var countScrolls = $('.mholder .row').length;
    $("#overlay").show();
     for (var i=0; i &lt; countScrolls; i++) {
       $('.mholder .row:nth-child(' + i + ')').stop();
    }
});

//PAUSE ON HOVER

$(".stop").hover(function () { 
    var countScrolls = $('.mholder .row').length;
     for (var i=0; i &lt; countScrolls; i++) {
       $('.mholder .row:nth-child(' + i + ')').stop();
    }
}, function () {
    var countScrolls = $('.mholder .row').length;

    for (var i=0; i &lt; countScrolls; i++) {
       doScroll($('.mholder .row:nth-child(' + i + ')'));
    }
});

});

function doScroll($ele) {
var bottom = parseInt($ele.css("bottom"));
    if (bottom &lt; -60) { //bit arbitrary!
    var $lastEle = $ele.closest('.mholder').find(".last");
    $lastEle.removeClass("last");
    $ele.addClass("last");
    var bottom = (parseInt($lastEle.css("bottom")) + $lastEle.height());
    $ele.css("bottom", bottom);
    }
    $ele.animate({
        bottom: (parseInt(bottom) - 80)
    }, 2200, 'linear', function() {
        doScroll($(this))
    });
}
</code></pre>
