悬停时暂停的 JQuery setInterval答案

【问题标题】：JQuery setInterval with pause on hover悬停时暂停的 JQuery setInterval
【发布时间】：2015-05-14 19:53:03
【问题描述】：

我正在尝试让多个 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：

【问题讨论】：

标签： jquery hover setinterval fade clearinterval

【解决方案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

【讨论】：

非常感谢！效果很好！

【解决方案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/

【讨论】：