JQuery setInterval с паузой при зависании

Question

Я пытаюсь заставить несколько divs исчезать и исчезать. Затем наведите указатель мыши на паузу анимации. Затем, наведите указатель мыши, продолжите анимацию. Прямо сейчас, я добрался до этого, дивы исчезают и выходят правильно, и при наведении он останавливается. Но когда я нахожусь, анимация не начинается снова. Любые предложения относительно того, что я делаю неправильно?

var timer; 
$(document).ready(function(){ 
    $(function startTimer(){ 
     $('#quotes .textItem:gt(0)').hide(); 
     timer = setInterval(function(){$('#quotes > :first-child').fadeOut().next('div').fadeIn().end().appendTo('#quotes');}, 1000); 
    }); 

    $('#quotes').hover(function (ev) { 
     clearInterval(timer); 
    }, function (ev) { 
     startTimer(); 
    }); 
}); 

Вот мой jfiddle:

Answer 1

попробовать это

var timer; 
$(document).ready(function(){ 
    timer = function(){$('#quotes > :first-child').fadeOut().next('div').fadeIn().end().appendTo('#quotes');}; 
    $('#quotes .textItem:gt(0)').hide(); 
    var interval = setInterval(timer , 2000); 
$('#quotes').hover(function (ev) { 
    clearInterval(interval); 
}, function (ev) { 
    interval = setInterval(timer , 2000); 
}); 
}); 

DEMO HERE

Answer 2

Попробуйте заменить вызова startTimer() следующие $('#quotes .textItem:gt(0)').hide(); для вызова startTimer() в качестве аргумента jQuery() вызова.

var timer; 
$(document).ready(function() { 

    function startTimer() { 
     timer = setInterval(function() { 
      $('#quotes > :first-child').fadeOut().next('div').fadeIn().end().appendTo('#quotes'); 
     }, 1000); 
    }; 
    $('#quotes .textItem:gt(0)').hide(); 
    startTimer(); 
    $('#quotes').hover(function (ev) { 
     clearInterval(timer); 
    }, function (ev) { 
     startTimer(); 
    }); 
}); 

jsfiddle http://jsfiddle.net/cc1bewvk/6/