将jquery函数暂停在悬停状态，然后继续

下面的代码实质上是为横幅设置动画。每五秒钟，旗帜交换一次，图像映射也交换一次。我想实现的是，当用户将鼠标悬停在横幅上时，五秒钟的倒计时将暂停（或重置），直到用户将鼠标光标从悬停中移除

我也希望这是兼容早在IE8，至于平板电脑/手机，我认为这不会很好地工作，所以将寻找一个工作在稍后

考虑：

$(function () {
  $('.fadein img:gt(0)').hide();
  setInterval(function () {
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
  }, 5000);
});

以及：

以及：

有什么建议吗？
您可以清除悬停图像地图的时间间隔，并在离开地图时恢复它

$('map').hover(function() {
    window.clearInterval(intervalBanner);
}, function() {
    intervalBanner = window.setInterval(fadeBanner, 5000);
});

为此，我将淡入淡出函数替换为自己的函数。因此，您可以随时通过调用
window.setInterval（fadeBanner，5000）恢复它

例如：
您需要将悬停状态存储在某个位置（最好是在该淡入淡出div的数据属性中），并在每个循环中检查悬停状态

$(function () {
    var fElement = $('.fadein');
    fElement.find('img:gt(0)').hide();
    setInterval(function () {
        if (!fElement.data('paused')) {
            fElement.find(':first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
        } else {
             console.log('waiting...');   
        }
    }, 5000);

    $('map').hover(
        function() {
            console.log('pausing');
            fElement.data('paused', 1);
        },
        function() {
            console.log('unpausing');
            fElement.data('paused', 0);
        }
    );
});

如果需要的话，这还允许您每5秒进行一次额外的处理，同时仍然停止动画（如将状态记录到Google Analytics中，通过AJAX刷新会话等）

更新的JSFIDLE:
我认为是：$（'.fadein'）.mouseover（function（）{clearInterval（fadein）；}）别担心，我会为宝贵的信誉点做任何事情：D
$('map').hover(function() {
    window.clearInterval(intervalBanner);
}, function() {
    intervalBanner = window.setInterval(fadeBanner, 5000);
});

$(function () {
    var fElement = $('.fadein');
    fElement.find('img:gt(0)').hide();
    setInterval(function () {
        if (!fElement.data('paused')) {
            fElement.find(':first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
        } else {
             console.log('waiting...');   
        }
    }, 5000);

    $('map').hover(
        function() {
            console.log('pausing');
            fElement.data('paused', 1);
        },
        function() {
            console.log('unpausing');
            fElement.data('paused', 0);
        }
    );
});