暫停jquery動畫懸停，停止點擊

我試圖做一個網頁，其中一組DIV從上到下循環（見小提琴）。然後，無論何時將鼠標懸停在某個部分（在本例中爲STOP鏈接），該動畫都會停止，然後在鼠標移出時再次播放。我現在缺乏的是停止動畫，只要點擊了STOP鏈接。我在鏈接上添加了停止功能，但它不起作用。我可能會發生衝突或某種懸停功能。暫停jquery動畫懸停，停止點擊

在此先感謝您的幫助，併爲好評問題而感到抱歉。

鏈接到小提琴：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)) 
    }); 
}

來源

2013-04-11 false-hero