在悬停时暂停jquery动画，点击停止

Question

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.

Thanks in advance for the help and sorry for the noobish question.

Link to the fiddle: http://jsfiddle.net/Psp9R/

Jquery:

$(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 < countScrolls; i++) {
       doScroll($('.mholder .row:nth-child(' + i + ')'));
    }
});

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

//PAUSE ON HOVER

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

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

});

function doScroll($ele) {
var bottom = parseInt($ele.css("bottom"));
    if (bottom < -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))
    });
}

Answer 1

Implement a interval which is cleared when the stop link is clicked, then started again on mouseout.

setInterval - https://developer.mozilla.org/en/docs/DOM/window.setInterval

clearInterval - https://developer.mozilla.org/en-US/docs/DOM/window.clearInterval

Answer 2

You know what, when you click stop, it really stops but when you move your mouse out of stop button, browser understands that you fire mouseout event and it resumes its jogging . So you have to tell browser that you click on stop button and ignore mouseout event. I changed your code by adding a flag iStop to order browser stop. You can check it out at: jsFiddle