pause jquery animation on hover, stop on click

Question

Я пытаюсь создать веб-страницу, где набор DIVs цикла сверху вниз (см. Скрипку). И тогда всякий раз, когда вы навешаете определенную часть div (в данном случае ссылку STOP), анимация останавливается, а затем снова воспроизводится на мыши. То, что мне сейчас не хватает, - это способ остановить анимацию всякий раз, когда была нажата эта кнопка STOP. Я добавил функцию остановки в ссылку, но она не будет работать. Возможно, был конфликт или что-то вроде функции зависания, которую я сделал.

Заранее благодарим за помощь и извините за вопрос noobish.

Ссылка на скрипку: 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

Вы знаете, что, когда вы нажимаете стоп, она действительно останавливается, но при перемещении мыши из кнопки остановки, браузер понимает, что вы стреляете MouseOut событие и его возобновляет свое бегство. Поэтому вы должны сообщить браузеру, что вы нажимаете кнопку «Стоп» и игнорируете событие mouseout. Я изменил ваш код, добавив флаг iStop, чтобы заказать остановку браузера. Вы можете проверить это: jsFiddle

Answer 2

Реализовать интервал, который очищается, когда связь остановки нажата, а затем снова начала отведение указателя мыши.

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

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