JQuery setInterval 悬停暂停

Question

我正在尝试让多个 div 淡入淡出。然后悬停，暂停动画。然后悬停，继续动画。现在我已经走到这一步了，div 正确淡入淡出，悬停时停止。但是当我悬停时，动画不会再次开始。关于我做错了什么有什么建议吗？

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

尝试用 $('#quotes .textItem:gt(0)').hide(); 之后的调用 startTimer() 代替调用 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/

JQuery setInterval 悬停暂停

JQuery setInterval with pause on hover

jquery

fade

hover

setinterval

clearinterval